前端简单实现页面下雪效果

html与css部分

<style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            overflow: hidden;
        }
        .container{
            min-height: 100vh;
            background-image: linear-gradient(to right,#56CCF2 ,#2F80ED);
        }
        .container span {
            position: absolute;
            top: 0;
            border-radius:50% ;
            height: 20px;
            width: 20px;
            background-color: #fff;
            filter: blur(3px);
            animation: snowFall 5s linear infinite;
        }

        @keyframes snowFall {
            100%{
                transform: translateY(105vh) scale(.4);
            }
        }
    </style>

<body>
　　 <div class="container"></div>
</body>

　　

 

js部分　

<script>
        function createSnow (){
            let container = document.querySelector('.container')
            let span = document.createElement("span")
            // 随机x轴出现雪  
　　　 // Math.random() * innerWidth 表示  Math.random() *  1920
　　　 // innerWidth 返回窗口的文档显示区的宽度，如果有水平滚动条，也包括滚动条高度。
            span.style.left = Math.random() * innerWidth + "px"
            container.appendChild(span)
            // 周期性将span删除
            setTimeout(()=> {
　　　　　// dom remove()方法 用来删除dom 接收一个参数index时,会按照DOM数组的下标删除dom
                span.remove()
            },5000)
        }
       // 每1毫秒创建雪
        setInterval(createSnow,100 )
</script>

　　

posted @ 2022-08-16 19:25  指尖掠过  阅读(189)  评论(0)    收藏  举报