简单易懂的雪花动态效果，欢迎你来学习

雪花飘落的执行效果

雪花飘落效果执行的行程
1：先设置样式，把图片插入body里面让图片的大小适应；
2：设置小雪花原始的大小，到后面通过script脚本进行雪花大小的效果；
3：在script的脚本里面获取屏幕的宽高，创建雪花；
4：定义一个初始化随机数；使雪花出现在屏幕中；
5：执行雪花飘落的效果；
6：雪花跑到屏幕外面了；会让雪花重新返回到屏幕顶部；

先设置样式：

 <style>
         :root body {
            padding: 0;
            margin: 0;
            overflow: hidden;
            background-image: url(./005.jpeg);
            background-size: cover;
            /* position: absolute; */
        }
        设置小雪花原始的大小
        .btn {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: white;
        }

2.在script里面获取屏幕的宽高

  var windowWidth = window.screen.width;
        var windowHeight = window.screen.height;

3.封装一个函数把雪花要执行的效果装起来最后执行函数的效果
下面两行代码 createElement(“div”)是在document里面添加一个div ，div.className = “btn”;这个是获取div里面类名在css样式获取div的大小
var div = document.createElement(“div”);
div.className = “btn”;

function setup() {
            var left = 0;
            var top = 0;
            var left_random = Math.random() * windowWidth;
            var top_random = Math.random() * windowHeight;
            var div = document.createElement("div");
            div.className = "btn";
            div.style.transform = 'scale(' + Math.random() + ')';
            //在页面上显示雪花（div）
            document.body.appendChild(div);

4.实现雪花飘落的效果，当雪花跑到屏幕外面了；会让雪花重新返回到屏幕顶部
**left += 2;
top += 2;这是设置雪花飘落的速度

 setInterval(function() {
               //使雪花在屏幕的飘落方向
                div.style.left = left_random + left + "px";
                div.style.top = top_random + top + "px";
                left += 2;
                top += 2;
                    //当雪花跑到屏幕外面了；会让雪花重新返回到屏幕顶部
                if (left_random + left >= windowWidth) {
                    left_random = Math.random();
                    left = 0;
                }
                if (top_random + top >= windowHeight) {
                    top_random = Math.random();
                    top = 0;
                }
            }, 10)

        }

**5.创建雪花的数量

 for (var i = 0; i < 500; i++) {
            setup()
        }

上面代码执行的动态效果图