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

2022-08-16 19:30:08 阅读：185 来源： 互联网

标签：container dom 下雪前端 random innerWidth span Math 页面

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>

标签：container,dom,下雪,前端,random,innerWidth,span,Math,页面
来源： https://www.cnblogs.com/hoodoo/p/16592704.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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