css3写下雨效果

标签：css   anim   for   pre   idt   style   turn   UNC   fir   

css3写下雨效果
<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;
}

@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;
}
</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); //四舍五入
return num;
}
</pre>

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

css3写下雨效果

标签：css   anim   for   pre   idt   style   turn   UNC   fir   

原文地址：https://www.cnblogs.com/newmiracle/p/11871482.html