屏幕下雪特效的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();
    }

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试