SAKURA
3月中旬，樱花盛开~想给你的站点来一场樱花雨吗？
献上jquery雪花插件[snowfall.jquery.js](/loktar00/JQuery-Snowfall)
该插件的参数有：
- flakeCount|number 雪花数量- flakeColor|#RGB 雪花颜色- flakeIndex|???不清楚- minSize|number雪花最小体积- maxSize|number雪花最大体积- minSpeed|number 雪花最小速度- maxSpeed|number 雪花最大速度- round|booleantrue雪花圆形|false方形(笑哭)- shadow|booleantrue雪花有阴影|false无阴影- image|url雪花图片
使用demo
css部分
<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部分
<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格式的。。。
效果预览:
[代码demo](/honjun/demo/tree/master/sakura)
