如何利用js和css实现html特效多彩雨

最新推荐文章于 2024-06-12 09:03:40 发布

十一_shiyi

最新推荐文章于 2024-06-12 09:03:40 发布

阅读量943

点赞数 3

文章标签： css html javascript

本文链接：https://blog.csdn.net/weixin_47760489/article/details/124833336

版权

效果图

代码部分

1.css部分

    <style>
        /* 设置基本样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            display: flex;
            background: #000;
            overflow: hidden;
            height: 100%;
        }
        /* 设置雨滴的属性 */
        body div {
            position: absolute;
            width: 0.3%;
            height: 200px;
            background: linear-gradient(transparent, #fff);
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            animation: rain 5s linear infinite;
        }
        /* 设置动画，其中vh表示相对页面可视窗口的高度的百分比 */
        @keyframes rain {
            0% {
                transform: translateY(-200px);
            }
            100% {
                transform: translateY(calc(100vh + 200px));
            }
        }
    </style>

2.body部分

<body>
    <script>
        // 创建一个下雨的方法
        function rain(){
            // 设置页面中会出现多少个雨滴
            let amount =120;
            let body =document.querySelector('body');
            let i = 0;
            while(i<amount){
                // 创建一个div
                let drop = document.createElement('div');
                // 定义一个存储background 属性值的数组，其中有十种不同的颜色
                let arr = [
                            'linear-gradient(transparent, green)',
                            'linear-gradient(transparent, red)',
                            'linear-gradient(transparent, pink)',
                            'linear-gradient(transparent, white)',
                            'linear-gradient(transparent, skyblue)',
                            'linear-gradient(transparent, yellow)',
                            'linear-gradient(transparent, Darkred)',
                            'linear-gradient(transparent, purple)',
                            'linear-gradient(transparent, Blue)',
                            'linear-gradient(transparent, SpringGreen)'
                        ]
                // 获取索引随机数
                let index = Math.floor(Math.random()*10)
                // 生成位置的随机数范围为页面的宽度
                let posX = Math.floor(Math.random()*window.innerWidth);
                // 设置动画延迟随机数，负数表示动画立即发生，但是跳过该秒数进入动画
                let delay = Math.random()*-20;
                // 设置动画完成一个周期的随机数
                let duration = Math.random()*5+1;
                // 设置创建的雨滴的背景属性
                drop.style.background = arr[index];
                // 设置雨滴出现的位置
                drop.style.left = posX + 'px';
                // 设置动画的延迟时间
                drop.style.animationDelay = delay + 's';
                // 设置动画的完成时间，时间不同导致雨滴下降的速度不同
                drop.style.animationDuration =  duration + 's';
                // 把新创建的雨滴添加到body中去
                body.appendChild(drop);
                i++
            }
        }
        // 调用函数
        rain()
    </script>
</body>

本篇文章介绍一下如何利用js和css实现多彩雨的效果，代码可能还有很多不足，但是基本能实现我想要的效果，有需要的可以参考一下，由于刚开始学前端不久，所以注释会很多，希望能够给大家提供一点帮助，希望大家能够一起进步。