集成HTML+CSS+JS代码

<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="utf-8" />
        <title>雨滴效果</title>
        <style type="text/css">
            body {
                margin: 0;
                position: relative;
            }
           
            .raining {
                display: block;
            }
           
            .backimg {
                position: absolute;/*定位*/
                left: 0;
                top: 0;
                background: url(https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dec470b0-fed6-46e5-be53-ec85fadc01be/c421aea0-a7ac-48b4-a386-3b93c9009c8d.jpg) no-repeat;/*背景图片*/
                background-size: cover;
                height: 100%;
                width: 100%;
                opacity: 0.6;/*给个透明度显示出背景*/
            }
        </style>
    </head>

    <body>
        <canvas class="raining"></canvas>
        <div class="backimg"></div>
    </body>
    <script type="text/javascript">
        var canvas = document.querySelector(".raining");//获取class为.raning的控件
        var w, h;
        ~~ function setSize() { //定义canvas的宽高，让他跟浏览器的窗口的宽高相同
            window.onresize = arguments.callee;
            w = window.innerWidth;
            h = window.innerHeight;
            canvas.width = w;
            canvas.height = h;
        }();

        var canCon = canvas.getContext("2d"); //建立2d画板
        var arain = []; //新建数组,储存雨滴
        //
        function random(min, max) { //返回最小值到最大值之间的值
            return Math.random() * (max - min) + min;
        }

        function rain() {};
        rain.prototype = {
            init: function() { //变量初始化
                this.x = random(0, w); //在0-w之间生成雨滴
                this.vx = 0.5;
                this.y = 0;
                this.vy = random(5, 10);
                this.h = random(0.9 * h, h); //地板高度
                this.r = 1; //雨滴绽放的半径
                this.vr = 1;
            },
            draw: function() {
                if(this.y < this.h) {
                    canCon.beginPath(); //拿起一支笔
                    canCon.fillStyle = "#CCC"; //笔墨的颜色
                    canCon.fillRect(this.x, this.y, 1, 10); //想象画一个雨滴
                } else {
                    canCon.beginPath(); //拿起一支笔
                    canCon.strokeStyle = "#CCC"; //笔墨的颜色
                    canCon.arc(this.x, this.y, this.r, 0, Math.PI,1); //想象画一个半圆
                    canCon.stroke(); //下笔作画
                }
            },
            move: function() {
                if(this.y < this.h) { //位置判断，让雨滴下落
                    this.y += this.vy;
                    this.x += this.vx;
                } else {
                    if(this.r < 30) { //落下后绽放的大小
                        this.r += this.vr;
                    } else {
                        this.init(); //放完后回归变量原点
                    }

                }
                this.draw(); //开始作画

            }
        }

        function createrain(num) {
            for(var i = 0; i < num; i++) {
                setTimeout(function() {
                    var raing = new rain(); //创建一滴雨
                    raing.init();
                    raing.draw();
                    arain.push(raing);
                }, 150 * i) //每隔150ms下落一滴雨
            }
        }
        createrain(40); //雨滴数量
        setInterval(function() {
            canCon.fillStyle = "rgba(0,0,0,0.08)"; //拿起一支透明0.13的笔       
            canCon.fillRect(0, 0, w, h); //添加蒙版 控制雨滴长度
            for(var item of arain) {
                //item of arain指的是数组里的每一个元素
                //item in arain指的是数组里的每一个元素的下标（包括圆形连上的可遍历元素）
                item.move(); //运行整个move事件
            }
        }, 500 / 60); //下落时间
    </script>

</html>

👋 感谢您的观看，对您有用就分享出去吧！

如您有好的资源/素材，可参与创作者激励计划享投稿分成。分成介绍
投稿成功收录，即可获得 1-10元/篇奖励。（重复内容无奖励）

本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负！

1 如果您喜欢本站,点击这儿赞助下本站，感谢支持！
2 可能会帮助到你：下载帮助 | 报毒说明 | 进站必看 | 广告合作；
3 本站内容观点不代表本站立场，并不代表本站赞同其观点和对其真实性负责；
4 本站所有内容均来源于网络，仅供学习与参考，请勿商业运营，严禁从事违法，侵权等任何非法活动，否则后果自负；
5 若作商业用途，请联系原作者授权，若本站侵犯了您的权益请联系站长进行删除处理；
6 如若转载，请注明文章出处：

THE END