css3写下雨效果
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了
如果遇到什么不懂的地方直接关注公众号留言(本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须在文章页面给出原文连接,否则保留追究法律责任的权利。)
作者:newmiracle
出处:https://www.cnblogs.com/newmiracle/