css3 write rain effect

css3 write rain effect
<pre>
<div class = "xiayuxiaoguo">
</ div>
</ pre>

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

Xiayu @keyframes / * Firefox * /
{

to {
top: 130%;
}
}

@-webkit-keyframes xiayu /* Safari 和 Chrome */
{

to {
top: 130%;
}
}
.yudi{
width:2px;
height: 10px;
position: absolute;
top:0%;
background: #000;
}
</pre>
<pre>
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); // rounded
return NUM;
}
</ pre>

Roughly raindrop is to use jquery to dynamically create and then play css3 animation is OK