js实现雪花效果 | Lililich's Blog

最近做年度奋斗轨迹项目的时候，用到了雪花飘落效果，记录一下~
学习参考：https://blog.csdn.net/hhzzcc_/article/details/79867154

改编完的实例：

实例1（效果较好）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>snow</title>
    <style>
        body,html{
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100%;
            background: black;
        }
        .snow{
            //background: white;
            position: absolute;
            color:#FFF;
            font-size:20px;
            //width: 20px;
            //height: 20px;
            //border-radius: 50%;
        }
    </style>

</head>
<body>
    <script>
        //获取屏幕宽高
        var windowWidth = window.screen.width;
        var windowHeight = window.screen.height;

        //创建雪花
        function createSnow(){
            var left = 0;
            var top = 0;

            //定义一个初始化随机数,使雪花在屏幕中
            var left_random = Math.random() * windowWidth;
            var top_random = Math.random()* windowHeight;
            var div = document.createElement('div');
            div.innerHTML="✽";   //div的内容
            div.className = 'snow';
            div.style.transform = 'scale('+(Math.random())+')'

            document.body.appendChild(div);

            //雪花飘落
            setInterval(function () {

                div.style.left = left_random + left +'px';
                div.style.top = top_random + top +'px'
                left += 0.2;
                top += 0.2;

                //如果雪花跑到屏幕外面了,让雪花重新返回屏幕顶部
                if(left_random + left >= windowWidth){
                    left_random = Math.random();
                    left = 0;
                }

                if(top_random + top >= windowHeight){
                    top_random = Math.random();
                    top = 0;
                }
            },10)

        }
        for(var i = 0 ; i < 200 ; i++){
            createSnow()
        }
    </script>
</body>
</html>

其中，可以通过调节number的大小来控制雪花的多少

for(var i = 0 ; i < number ; i++){
    createSnow()
}

通过调节top、和left的自增大小x和y、来调整雪花飘落的方向和飘落快慢

div.style.left = left_random + left +'px';
div.style.top = top_random + top+'px'
left += x;
top += y;

实例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>snow</title>
    <style>
        *{padding: 0;margin: 0;}
        body{
            background:#000;
            width: 100%;
            height: 100%;
            overflow:hidden;
        }
    </style>

</head>
<body>
    <div id="flame"></div>
<script>


    function Obj(){}  //创建一个对象

        /*为这个对象添加一个具有一个参数的原型方法*/
        Obj.prototype.draw=function(o){
            var speed=0;   //雪花每次下落的数值（10px）
            var startPosLeft=Math.ceil(Math.random()*document.documentElement.clientWidth);//设置雪花随机的开始x值的大小
            o.style.opacity=(Math.ceil(Math.random()*3)+7)/10;  //设置透明度
            o.style.left=startPosLeft+'px'; 
            o.style.color="#fff";
            o.style.fontSize=12+Math.ceil(Math.random()*14)+'px';
            setInterval(function(){
                //雪花下落的top值小鱼屏幕的可视区域高时执行下列
                if(speed<document.documentElement.clientHeight){
                    o.style.top=speed+'px';
                    o.style.left=startPosLeft+Math.ceil(Math.random()*8)+'px';
                    speed+=10;
                }
                else{
                    o.style.display='none';
                }
            },400);
        }

        var flame=document.getElementById('flame');

        /*使用setInterval定时器每800毫秒创建一个雪花*/
        setInterval(function(){
            var odiv=document.createElement('div');  //创建div
            odiv.innerHTML="✽";   //div的内容
            odiv.style.position='absolute';  //div的绝对定位
            flame.appendChild(odiv);   //把创建好的div放进flame中
            var obj=new Obj();   //创建函数
            obj.draw(odiv);  //执行obj的draw方法
        },800);  

    </script>
</body>
</html>