使用JS实现下落雪花

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            body{
                overflow: hidden;
            }
            span{
                position: absolute;
                top: -100px;
                left: 0;
                transition: all 5s ease-in-out;
                font-size:60px;
            }
            span{color:#c4e2f0;}
            
        
        </style>
    </head>
    <body>
        <span>❄❆</span>

        <img src="../img/下雪.png" style="width: 1500px;height: 800px;">
    </body>
    <script>
        
        sp = document.querySelector('span');
        
        var snow=setInterval(fall,3);//控制开始下雪,每10毫秒调用、
        var starttime=new Date().getTime();//开始时间
        
        function fall(){
            //当前时间
            var now=new Date().getTime();
            if(now-starttime>1*897152635){//雪花数量
                clearInterval(show);//清除定时器
            }
            
            var nsp = sp.cloneNode(true);
            //window.innerwidth浏览器的宽度
            //雪花产生的位置是水平随机的
            nsp.style.left=Math.floor(Math.random()*window.innerWidth)+'px';
            document.querySelector('body').appendChild(nsp);
            
            //延迟降落
            var time=Math.floor(Math.random()*9900)+100;
            
            setTimeout((o)=>{
                nsp.style.top= '750px';
                //雪花落下的位置  水平是随机的
            nsp.style.left=Math.floor(Math.random()*window.innerWidth)+'px'},time,nsp);
        }
        var nsp = Math.random() * documentWidth;
        
        
        
    </script>
</html>

//也可以把雪花标志给替换完别的,下落的就是别的,可以换爱心或者自己喜欢的背景图片路径改一下就可以用了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值