hojun
2 分钟阅读

樱花飘落特效

在百度上搜索樱花飘落特效，发现自己之前的特效文章并没有被搜录，于是又厚着脸皮重新发了一遍，希望这次百度能给我收录咯。 该特效是根据snowfall.jquery.js雪花插件修改的，需要依赖jquery。 该插件的参数有： flakeCount|number 雪花数量 flakeColor|#RGB

特效jquery

在百度上搜索樱花飘落特效，发现自己之前的特效文章并没有被搜录，于是又厚着脸皮重新发了一遍，希望这次百度能给我收录咯。
该特效是根据snowfall.jquery.js雪花插件修改的，需要依赖jquery。
该插件的参数有：

  • 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
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/snowfall.jquery.js"></script>
<script>
    function sakuraInit() {
        $(document).snowfall('clear');
        if (document.body.clientWidth > 600) {
            $(document).snowfall({image:"/images/sakura/1.png", flakeCount:20, minSpeed:1, minSize:8, maxSize:15,});
            $(document).snowfall({image:"/images/sakura/1.png", flakeCount:20, minSpeed:1, minSize:8, maxSize:15,});
            $(document).snowfall({image:"/images/sakura/2.png", flakeCount:20, minSpeed:1, minSize:8, maxSize:15,});
            $(document).snowfall({image:"/images/sakura/4.png", flakeCount:20, minSpeed:1, minSize:8, maxSize:15,});
        } else {
            $(document).snowfall({image:"/images/sakura/1.png", flakeCount:10, minSpeed:1, minSize:8, maxSize:15,});
            $(document).snowfall({image:"/images/sakura/1.png", flakeCount:10, minSpeed:1, minSize:8, maxSize:15,});
            $(document).snowfall({image:"/images/sakura/2.png", flakeCount:10, minSpeed:1, minSize:8, maxSize:15,});
            $(document).snowfall({image:"/images/sakura/4.png", flakeCount:10, minSpeed:1, minSize:8, maxSize:15,});
        }
    }
    window.onload = sakuraInit();
</script>

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