HTML5页面飘落蒲公英动画实现---随笔

效果展示

编码实现

html

<div class="snow-container" style="position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100001;">
  	<canvas width="1920" height="100"></canvas>
</div>

js插件

由于文件比较大，只能以文件形式上传了

下载地址:https://download.csdn.net/download/qq_39668819/12369778
注意修改图片的路径

同时附带上点击实现 文字上浮动画的js

效果

jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("利刃","寒锋", "银星", "折返", "前行");
        var index = Math.floor(Math.random() * (a.length));
        var $i = $("<span></span>").text(a[index]);
        var x = e.pageX,
            y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
                "top": y - 180,
                "opacity": 0
            },
            1500,
            function() {
                $i.remove();
            });
    });
});