CSS+随机数+定时器实现下雨效果

最新推荐文章于 2023-08-25 17:00:46 发布

云墨-款哥的博客

最新推荐文章于 2023-08-25 17:00:46 发布

阅读量537

点赞数 8

分类专栏：随机数 JavaScript 文章标签： css js css3 前端 html

本文链接：https://blog.csdn.net/m0_56026872/article/details/117964675

版权

JavaScript 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

随机数

2 篇文章 0 订阅

订阅专栏

代码如下：注释不懂得欢迎评论

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>雨滴</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-image: url("https://images6.alphacoders.com/932/932284.png");
            background-repeat: no-repeat;
            background-size: 100%;
        }
    </style>
</head>

<body>

</body>
<script>
    setInterval(function () {
        //创建rain元素
        var rain = document.createElement('div')

        //初始化 rain属性
        rain.style.position = 'fixed' //设置固定定位
        rain.style.height = '100px' //雨滴的高度
        rain.style.width = '2px' //雨滴的宽度
        rain.style.backgroundColor='white' //雨滴的颜色
        rain.style.filter = 'blur(1px)' //模糊 阴影
        rain.style.top = '0px' //雨滴距离屏幕的高度

        rain.style.left = Math.random() * 1920 + 'px' //随机化位置 1920:分辨率 宽度
        rain.style.opacity = parseInt(Math.random() * 10) / 10 + "" //随机化透明度

        //向body里添加节点 rain
        document.body.appendChild(rain)
        var timer = setInterval(function () {
            var height = parseInt(rain.style.top)
            var k = 1;
            k++;
            rain.style.top = height + 5 * Math.pow(k, 2) + 'px' //模拟重力加速 pow:幂 k的2次方

            //当雨滴到达底部后消失并清除子节点rain
            if (rain.style.top >= '900px') {
                clearInterval(timer)
                rain.parentNode.removeChild(rain)
            }

        }, 10) //每隔10ms 雨滴下一次   


    }, 10) //每隔10ms生成水滴

    //有兴趣的再加个音乐播放器 配合画面 氛围就上来了
</script>

</html>

背景图片

在这里插入图片描述

云墨-款哥的博客

关注

8
点赞
踩
4

收藏

觉得还不错? 一键收藏
4
评论
CSS+随机数+定时器实现下雨效果

代码如下：注释不懂得欢迎评论<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫