屏幕下雪特效的jQuery实现

 
@keyframes snowRotate {
    100% {
        transform: rotate(360deg)
    }
}
.snow{
    animation-name: snowRotate;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
//上面是css样式
 
<script>
    $(function($){//注意要先引入jQuery.js
       snowId=setInterval("createS()",700);//每隔700ms创建一个雪花
       snowDw=setInterval("snowDow()",720);//每隔720ms落下一个雪花
       setTimeout("starClean()",13000);//当第一个雪花完全落下时开始删除雪花
    });
    var num=0;
    var ss=0;
    var cc=0;
    function createS(){//创建雪花函数
         num++;
         var pp=Math.random()*1300;//雪花的横向生成位置
         var siz=Math.random()*30+10;//雪花的大小
        var nid="sid"+num;
        var snow='<div id="'+nid+'" class="sid"><img  class="snow" src="img/雪花.png" height="'+siz+'" width="'+siz+'"/></div>';//图片是一张透明雪花的图片
        $('#bg').append(snow);//此处#bg是背景图片所在的div,最外层的div
        $('#sid'+num).css({'position':'absolute','left':pp,'top':'0px','transition':'12s linear'});//雪花的属性设置
    };
    function snowDow(){//雪花下落函数
        ss++;
        $('#sid'+ss).css({'transform':'translateY(760px)'});//雪花下落的高度
    };
    function starClean(){//开始清除雪花函数,主要照顾第一片雪花的效果
        clearsnw=setInterval("clearSnow()",730);
    }
    function clearSnow(){//清除雪花函数
        cc++;
        $('#sid'+cc).remove();
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值