@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(); }