css3写下雨效果详解编程语言

css3写下雨效果

<div class="xiayuxiaoguo">
</div>

.xiayuxiaoguo{
 width:100%;
 height: 100%;
 position: absolute;
 left:0px;
 top:0px;
 z-index: 2;
}
.xiayu {
 animation: xiayu 2s forwards;
 -webkit-animation: xiayu 2s forwards;
}
 

@keyframes xiayu /* Firefox */
{
 
 to {
 top: 130%;
 }
}
 
@-webkit-keyframes xiayu /* Safari 和 Chrome */
{
 
 to {
 top: 130%;
 }
}
.yudi{
 width:2px;
 height: 10px;
 position: absolute;
 top:0%;
 background: #000;
}

xiayu();
function xiayu() {
 setTimeout(function () {
 var leftsuiji=RandomNumBoth(0,100);
 var yudi='<div style="left:'+leftsuiji+'%;" class="yudi xiayu"></div>';
 $(".xiayuxiaoguo").append(yudi);
 xiayu();
 if($('.yudi').length>=150){
 $('.yudi').remove();
 }
 },100)
}
function RandomNumBoth(Min,Max){
 var Range = Max - Min;
 var Rand = Math.random();
 var num = Min + Math.round(Rand * Range); //四舍五入
 return num;
}

大致就是利用jquery动态创建雨滴 然后播放css3动画就OK了