Question

我正试图对我的网站产生降雨效果，但我不能（我尝试了js代码的loooooot，但似乎没有人工作......但在演示页面中它们完美地工作......我正在尝试的最后一个是在这个页面中：

http://redeando.blogspot.com/2013/02/lluvia-en-tu-blog.html

和代码：

<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>

谁能帮助我实现降雨效果？帮助我使用这段代码，或者你知道其他方式吗？

问题是：当我把代码放在一边时，它似乎是闪闪发光的东西......看到图像......！

enter image description here

页面底部的所有水滴都被压缩或压扁......

Answer 1

<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>

网页雨效应？

1 个答案: