在網頁中的雨效應？

我想對我的網站做一個雨天的效果，但我不能（我已經嘗試了一段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>

誰能幫助我實現雨效果？幫助我這個代碼，或者如果你知道其他方式??

the pr問題是：當我把代碼看起來似乎是小故障或什麼...看到圖像...！

enter image description here

所有滴凝結或在頁面的底部壓扁......

來源

2014-01-25 DeadlyCrow

您曾表示[這個小提琴（HTTP「作品」的代碼：// jsfiddle.net/F8b5Z/）（在Chrome中，無論如何）。如果效果根本不符合你的口味，那麼你是否可以更清楚地瞭解你想要的東西？ – nnnnnn

TSS tss ...你不應該訪問SkidRow球員。他們是EVIL：D。這段代碼看起來不太健壯。例如，它不會在IE11上運行。由於所有內容都是用西班牙文寫的，所以我會通過這個。 –

你檢查過你的網頁開發工具包嗎？ – ankur140290

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

來源

2014-07-27 20:36:59 Alex

在網頁中的雨效應？

回答

相關問題