网页背景特效，下雨

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下雨特效</title>


    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .content{
            width: 100vw;
            height: 100vh;
            background:url(https://xn--xu0a.cn/api/dn/) center center no-repeat;
            background-size:cover;
        }
        #rainBox{
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
        }
        .rain{
            position: absolute;
            width: 2px;
            height: 50px;
            background: linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.6));
        }
    </style>
    <style type="text/css">
        @font-face { font-family: TencentSans; src: url("chrome-extension://lkjkfecdnfjopaeaibboihfkmhdjmanm/static/fonts/TencentSans.woff2"); }
    </style>
</head>

<body>
    <div class="content">
        <div id="rainBox"></div>
    </div>

    <script>
        
        const box=document.getElementById('rainBox');
        
        
        let boxHeight=box.clientHeight;
        
        
        let boxWidth=box.clientWidth;
        
        
        window.onload=function(){
            boxHeight=box.clientHeight;
            boxWidth=box.clientWidth;
        }
        
        // 添加一个定时器，每隔一段时间添加雨点
        setInterval(()=>{
            const rain=document.createElement('div');
            
        
            rain.classList.add('rain');
            
            
            rain.style.top='0';
            
            
            rain.style.left=Math.random()*boxWidth+'px';
            
            
            rain.style.opacity=Math.random();
            
            box.appendChild(rain);
            
            
            let race=1;
            
            const timer=setInterval(()=>{
                if(parseInt(rain.style.top)>boxHeight){
                    clearInterval(timer);
                    box.removeChild(rain);
                }
                race++;
                rain.style.top=parseInt(rain.style.top)+race+'px';
            },20);
        
        },50);
        
        
        
        
    </script>

</body>
<div id="transmart-crx-shadow-root" style="all: initial;"></div>

</html>