Javascript 网页中的雨效应？_Javascript_Webpage_Effect

Javascript 网页中的雨效应？

javascript

Javascript 网页中的雨效应？,javascript,webpage,effect,Javascript,Webpage,Effect,我试图在我的网站上制作一个rain效果，但我做不到（我已经尝试了大量的js代码，但似乎没有人能工作……但是在演示页面中，它们工作得非常好……我尝试的最后一个是在这个页面中：以及守则： <div class="lluvia"></div><style> .gotas { background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(rgba(255

我试图在我的网站上制作一个rain效果，但我做不到（我已经尝试了大量的js代码，但似乎没有人能工作……但是在演示页面中，它们工作得非常好……我尝试的最后一个是在这个页面中：

以及守则：

<div class="lluvia"></div><style>
.gotas {
background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ),          to(rgba(255,255,255,0.6))  );
background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%,      rgba(255,255,255,.6) 100%);
width:1px;height:89px;
position: absolute;top:0px;z-index:99999;
-webkit-animation: fall .63s linear infinite;
 -moz-animation: fall .63s linear infinite;
 }
@-webkit-keyframes fall {
to {margin-top:900px;}
}
@-moz-keyframes fall {
 to {margin-top:900px;}
}
 </style><script type="text/javascript">

 (function() {

 var nbDrop = 200; 

 function randRange( minNum, maxNum) {
  return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
 }

 function createRain() {

  for( i=1;i<nbDrop;i++) {
  var dropLeft = randRange(0,980);
 var dropTop = randRange(-1000,1400);

  $('.lluvia').append('<div class="gotas" id="gotas'+i+'"></div>');
  $('#gotas'+i).css('left',dropLeft);
  $('#gotas'+i).css('top',dropTop);
  }

 }

 createRain();

 })();

 </script>


哥达斯先生{
背景：webkit梯度（线性，0%0%，0%100%，从（rgba（13,52,58,1））到（rgba（255255,0.6））；
背景：-moz线性梯度（顶部，rgba（13,52,58,1）0%，rgba（255255,6）100%）；
宽度：1px；高度：89px；
位置：绝对；顶部：0px；z索引：99999；
-webkit动画：fall.63s线性无限；
-莫兹动画：秋天.63秒线性无限；
}
@-webkit关键帧下降{
至{页边距顶端：900px；}
}
@-moz关键帧下降{
至{页边距顶端：900px；}
}
（功能（）{
var nbDrop=200；
函数randRange（minNum、maxNum）{
返回（Math.floor（Math.random（）*（maxNum-minNum+1））+minNum）；
}
函数createRain（）{
对于（i=1；i
所容纳之物
你好
正文，html{
边际：0px；
填充：0px；
}
帆布{
z指数：999；
边际：0px；
填充：0px；
背景色：透明；
位置：绝对位置；
}
h1，p{
文本对齐：居中；
}
var-rainNum=100；
var canvas=document.getElementById（'c'）；
var ctx=canvas.getContext（'2d'）；
var w=window.innerWidth/1.1；var h=window.innerHeight/1.1；
变量x=100；变量y=100；
var雨=[]；
对于（i=0；ih+20）{
r、 y=-20；
}
}
};
设置间隔（绘制，3）；
您在中显示的“工作”代码（无论如何，在Chrome中）。如果效果不符合您的口味，您是否可以更清楚地了解您想要什么？Tss Tss…您不应该访问SkidRow的家伙。他们是邪恶的：D。此代码似乎不太可靠。例如，它不会在IE11上运行。因为所有内容都是西班牙语的，所以我将传递此内容。您是否查看了web developer kit上的页面？@nnnnnn雨滴落在正确的方向上，但它们是颠倒的！我吓坏了，伙计！@Birrel它们不是颠倒在黑色背景上的：D:D
<html>
<canvas id="c"></canvas>

<h1>Content</h1>

<p>Hello!!!</p>
</html>






<style>
body, html {
  margin: 0px; 
  padding: 0px; 
}

canvas {
  z-index: 999; 
  margin: 0px; 
  padding: 0px; 
  background-color: transparent; 
  position: absolute; 
}

h1, p {
  text-align: center; 
}
</style>






<script>
var rainNum = 100;

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

var w = window.innerWidth / 1.1; var h = window.innerHeight / 1.1;
var x = 100; var y = 100;

var rain = [];
for(i = 0; i < rainNum; i++) {
  rain.push(new newRain);
}

function newRain() {
  this.x = Math.random() * w;
  this.y = Math.random() * h;
}

var draw = function() {
  c.width = w;
  c.height = h;

  for(t = 0; t < rain.length; t++) {
    var r = rain[t];

    ctx.beginPath();
    ctx.fillStyle = 'black';
    ctx.fillRect(r.x, r.y, 2, 20);

    r.y++;

    if(r.y > h + 20) {
      r.y = -20;
    }
  }
};

setInterval(draw, 3);
</script>