哄另一半开心的下雨特效

最新推荐文章于 2023-07-26 17:13:11 发布

进阶H5小白

最新推荐文章于 2023-07-26 17:13:11 发布

阅读量395

点赞数 1

分类专栏： H5 JS 文章标签： html css3 javascript

本文链接：https://blog.csdn.net/qq_42660453/article/details/121914663

版权

H5 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

14 篇文章 0 订阅

订阅专栏

在不下雨的天气，发给另一半这个下雨特效的html文件，她能开心一整天！！！

看效果

附上源码

HTML+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">
    <title>Document</title>
    <style>
        body {
            background-color: black;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <script src="rain.js"></script>
    <script>
        var arr = [];
        animation();
        function animation() {
            requestAnimationFrame(animation);
            for (var i = 0; i < random(3, 6); i++) {
                const rain = new ClsRain();
                rain.appendTo('body');
                arr.push(rain);
            }
            arr.forEach((item, key) => {
                item.update();
                if (!item)
                    arr.splice(key, 1);
            })
        }
        function random(min, max) {
            return parseInt(Math.random() * (max + 1 - min) + min);
        }
    </script>
</body>

</html>

JS代码

class ClsRain{
    constructor(){
        this.elem;
        this.rain;
        this.x;
        this.y;
        this.speed=this.random(10,30);
    }
    random(min,max){
        return parseInt(Math.random()*(max+1-min)+min);
    }
    fnCreateTheRain(element){
        this.rain=document.createElement('div');
        this.rain.style.width=3+'px';
        this.rain.style.height=10+'px';
        this.rain.style.borderRadius=2+'px';
        this.rain.style.backgroundColor="white";
        this.rain.style.position="absolute";
        this.rain.style.top=-10+'px';
        this.y=-10;
        this.x=this.random(0,this.elem.clientWidth);
        console.log(this.elem.off);
        this.rain.style.left=this.x+'px';
        element.appendChild(this.rain);
        
    }
    appendTo(element){
        if(typeof element==='string'){
            this.elem=document.querySelector(element);
        }
        this.fnCreateTheRain(this.elem);
    }
    update(){
        if(!this.rain)
            return;
        console.log(this.y);
        this.y+=this.speed;
        this.rain.style.top=this.y+'px';
        if(this.y>document.documentElement.clientHeight){
            this.rain.remove();
            this.rain=null;
        }
    }
}

不会吧，不会吧，不会你还没有另一半吧。嘻嘻。

进阶H5小白

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
哄另一半开心的下雨特效

在不下雨的天气，发给另一半这个下雨特效的html文件，她能开心一整天！！！看效果附上源码HTML+CSS代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten
复制链接

扫一扫