javascript实现下雨效果
效果图：
代码如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>梦柯教育-锤子老师</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;color:#fff;}
body {
overflow: hidden;
background: black;
text-align: center;
line-height: 20px;
}
</style>
</head>
<body><a href="https://jq.qq.com/?_wv=1027&k=469M8qI" rel="external nofollow" id="show" style="position:absolute;bottom:0;left:10px;"></a>
<canvas id="canvas-club" width="1920" height="666"></canvas>
<script type="text/javascript">
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('d c=1h.1d("1b-19");d 7=c.14("W");d w=c.I=f.z;d h=c.H=f.G;d E=\'18(0, 0, 0, .15)\';d A=Z;d k=[];e g(a,b){16 1a.g()*(b-a)+a}e O(){}O.X={v:e(){6.x=g(0,w);6.y=0;6.B=\'U(C, m%, D%)\';6.w=2;6.h=1;6.F=g(4,5);6.t=3;6.s=1;6.q=2;6.n=g(h*.8,h*.9);6.a=1;6.J=.V},K:e(){l(6.y>6.n){7.T();7.Y(6.x,6.y-6.h/2);7.L(6.x+6.w/2,6.y-6.h/2,6.x+6.w/2,6.y+6.h/2,6.x,6.y+6.h/2);7.L(6.x-6.w/2,6.y+6.h/2,6.x-6.w/2,6.y-6.h/2,6.x,6.y-6.h/2);7.10=\'11(C, m%, D%, \'+6.a+\')\';7.12();7.13()}u{7.M=6.B;7.N(6.x,6.y,6.q,6.q*5)}6.P()},P:e(){l(6.y<6.n){6.y+=6.F}u{l(6.a>.17){6.w+=6.t;6.h+=6.s;l(6.w>m){6.a*=6.J;6.t*=.Q;6.s*=.Q}}u{6.v()}}}};e p(){w=c.I=f.z;h=c.H=f.G}e R(){S(d i=0;i<A;i++){(e(j){1c(e(){d o=1e O();o.v();k.1f(o)},j*1g)}(i))}}e r(){7.M=E;7.N(0,0,w,h);S(d i 1i k){k[i].K()}1j(r)}f.1k("p",p);R();r();',62,83,'||||||this|ctx||||||var|function|window|random||||drops|if|100|hit||resize|size|anim|vh|vw|else|init||||innerWidth|max|color|180|50|clearColor|vy|innerHeight|height|width|va|draw|bezierCurveTo|fillStyle|fillRect||update|98|setup|for|beginPath|hsl|96|2d|prototype|moveTo|30|strokeStyle|hsla|stroke|closePath|getContext|08|return|03|rgba|club|Math|canvas|setTimeout|getElementById|new|push|200|document|in|requestAnimationFrame|addEventListener'.split('|'),0,{}))
var str = "点击我们学习更多内容";
setTimeout(function(){
document.getElementById("show").innerHTML=str;
},3000)
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持小牛知识库！
-
本文向大家介绍python实现雨滴下落到地面效果，包括了python实现雨滴下落到地面效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了python实现雨滴下落到地面效果的具体代码，供大家参考，具体内容如下 本程序在Windows 64位操作系统下，安装的是Anaconda3-4.2.0 效果图： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍pygame实现烟雨蒙蒙下彩虹雨，包括了pygame实现烟雨蒙蒙下彩虹雨的使用技巧和注意事项，需要的朋友参考一下 学习了一天的深度学习，略有疲惫，我们用pygame搞个小游戏放松放松吧。今天我们的游戏主体是烟雨蒙蒙下彩虹雨，仿佛置身江南水乡。 游戏描述 我们希望看到江南水乡下起彩虹雨。这里背景是江南水乡，烟雨蒙蒙，雨滴颜色五颜六色，大小不一。 解决思路 烟雨蒙蒙彩虹雨的意思很明确，有
-
本文向大家介绍jQuery实现的模仿雨滴下落动画效果，包括了jQuery实现的模仿雨滴下落动画效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现的模仿雨滴下落动画效果。分享给大家供大家参考，具体如下： 效果如图： 实现思路：定时器每隔x秒生成宽高、下落速度（即动画执行时间）、left随机的div。 1.CSS： 2.JS: 本来最开始想计算雨滴left和下落高度的最大
-
本文向大家介绍python实现黑客字幕雨效果，包括了python实现黑客字幕雨效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了python实现字幕雨效果的具体代码，供大家参考，具体内容如下 效果图： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
vue3实现红包雨怎么实现呢？ vue3实现红包雨怎么实现呢？
-
本文向大家介绍JavaScript实现网页下拉菜单效果，包括了JavaScript实现网页下拉菜单效果的使用技巧和注意事项，需要的朋友参考一下 JavaScript（js）网页–下拉菜单制作 在网页的设计中，经常会出现二级下拉菜单，当鼠标经过时，显示二级菜单，鼠标离开时隐藏。例如新浪网 鼠标放到微博、博客或邮箱上面时，会出现一个二级菜单，鼠标离开则隐藏。 设计简单的下拉菜单栏 以上就是本文的全部内
-
本节课通过一个精灵模拟模拟下雨的场景进一步建立精灵模型和粒子系统的概念。 基本思路就是通过足够多的精灵模型构成一个粒子系统，然后每一个雨滴按照在一定空间内随机分布，每个精灵模型都使用一个背景透明的雨滴rain.png作为纹理贴图。 在空间中随机生成静态分布的雨滴 /** * 精灵创建下雨效果 */ // 加载雨滴理贴图 var textureTree = new THREE.TextureLo
-
本文向大家介绍javascript实现无缝上下滚动特效，包括了javascript实现无缝上下滚动特效的使用技巧和注意事项，需要的朋友参考一下 本文实例讲解了javascript实现无缝上下滚动的代码，分享给大家供大家参考，具体内容如下 js实现上下无缝滚动的原理是这样的： 1、首先给容器设定高度或宽度，然后overflow:hidden； 2、容器高度设定后，内容超出则被隐藏。 3、改变容器的s