用js实现下雨

最新推荐文章于 2023-08-10 10:31:31 发布

yw在路上

最新推荐文章于 2023-08-10 10:31:31 发布

阅读量177

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_55939638/article/details/131945551

版权

这是代码实现效果，其实稍微改一下可以做成红包雨，或者实现下雪效果。

原理很简单，就是用js生成dom元素，再结合css动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        html, body {
            height: 100%;
        }

        .content {
            position: relative;
            width: 100%;
            height: 100%;
            background-color: skyblue;
            overflow: hidden;
        }

        .rain {
            clip-path: ellipse(10% 50% at 50% 50%);
            width: 5px;
            opacity: 0;
            height: 5px;
            background-color: #fff;
            position: absolute;
            transform: scale(3);
            animation: drop 1.2s cubic-bezier(0.36, -0.36, 0.82, 0.33) infinite
        }

        @keyframes drop {
            0% {
                opacity: 0;
            }
            20% {
                opacity: 1;

            }
            90% {
                opacity: 1;

            }
            100% {
                opacity: 0;
                transform:translate3d(10px,100vh,-10px);

            }
        }
    </style>
</head>
<body>
<div class="content">
    <div class="rain"></div>

</div>
</body>
<script>
    //获取主体元素
    let content=document.querySelector(".content");
    //获取雨滴
    let rain=document.querySelector(".rain");
    let start=0;
    //i控制雨滴数量
    for(var i=0;i<=350;i++){
        //雨滴向左移动距离
        let left=Math.floor(Math.random()*5+3);
        //雨滴初时位置，遇到要逐渐向左移动，避免都堆在一块
        start+=left;
        //雨滴的css属性animation-delay属性让雨滴下落时间随机
         let a="left:"+start+"px;top:"+left+"px;"+"animation-delay:"+Math.random()*1.2+"s";
         //创建雨滴元素
          let  d=document.createElement("div");
          d.className="rain"
          d.style.cssText=a;
          console.log(a)
           content.appendChild(d);
    }
</script>
</html>