snowfall.jquery.js实现樱花飘落效果

#

前几天圣诞节玩了把雪花飘落的jquery插件
结果一不小心又想搞个樱花飘落效果。。。不幸晚睡————猝
献上jquery雪花插件snowfall.jquery.js
该插件的参数有：

• flakeCount|number 雪花数量
• flakeColor|#RGB 雪花颜色
• flakeIndex|??? 不清楚
• minSize|number 雪花最小体积
• maxSize|number 雪花最大体积
• minSpeed|number 雪花最小速度
• maxSpeed|number 雪花最大速度
• round|boolean true雪花圆形|false方形(笑哭)
• shadow|boolean true雪花有阴影|false无阴影
• image|url 雪花图片

使用demo
//css部分

1
2
3
4
5
6
7
8
9
10

<style>
.snowfall-flakes{animation:sakura 1s linear 0s infinite;}
@keyframes sakura{
0% {transform:rotate3d(0, 0, 0, 0deg);}
25%{transform:rotate3d(1, 1, 0, 60deg);}
50%{transform:rotate3d(1, 1, 0, 0deg);}
75%{transform:rotate3d(1, 0, 0, 60deg);}
100% {transform:rotate3d(1, 0, 0, 0deg);}
}
</style>

//js部分

1
2
3
4
5
6
7

<script>
$(document).snowfall('clear');
$(document).snowfall({image:"1.png", flakeCount:10, minSpeed:1, minSize:8, maxSize:15,});
$(document).snowfall({image:"2.png", flakeCount:10, minSpeed:1, minSize:8, maxSize:15,});
$(document).snowfall({image:"3.png", flakeCount:10, minSpeed:1, minSize:8, maxSize:15,});
$(document).snowfall({image:"4.png", flakeCount:10, minSpeed:1, minSize:8, maxSize:15,});
<script>

飘落的时候添加了css的3D翻转效果，使之更加逼真
图片是用ps一个一个扣下来的。扣好发现jpg格式不能带透明度，然后又心酸的重新扣png格式的。。。