css3写下雨效果

最新推荐文章于 2024-07-23 16:07:28 发布

「已注销」

最新推荐文章于 2024-07-23 16:07:28 发布

阅读量3.4k

点赞数

本文链接：https://blog.csdn.net/oMiracle123/article/details/62224356

版权

css3写下雨效果

  
  

  
  


.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%;
    }
}

xiayu();
function xiayu() {
    setTimeout(function () {
        var leftsuiji=RandomNumBoth(0,100);
        var yudi='
  
  ';
        $(".xiayuxiaoguo").append(yudi);
        xiayu();
        if($('.yudi').length>=150){
            $('.yudi').remove();
        }
    },100)
}


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






查看原文：http://newmiracle.cn/?p=1321