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了

原创文章如转载,请注明本文链接: http://newmiracle.cn/?p=1321

发表评论

电子邮件地址不会被公开。 必填项已用*标注