听说冬天和雪花更配哦

首先，一首届不到的恋送给大家：
cPlayerOptions.push({"id":1,"list":[{"artist":"\u51ac\u99ac\u304b\u305a\u3055","name":"\u5c4a\u304b\u306a\u3044\u604b","image":"\/\/p1.music.126.net\/xS5fvWgXpN0pawnAi012zA==\/18587244069265999.jpg?param=128x128","url":"https:\/\/imjad.cn\/action\/cplayerapi?get=url&id=449818930","lyric":"[ti:\u5c4a\u304b\u306a\u3044\u604b]\n[ar:\u51ac\u99ac\u304b\u305a\u3055(CV.\u751f\u5929\u76ee\u4ec1\u7f8e)]\n[al:WHITE ALBUM2 ORIGINAL SOUNDTRACK\uff5ekazusa\uff5e]\n[by:\u83dc\u7c7d\u9171]\n[00:00.00] \u4f5c\u66f2 : \u77f3\u5ddd\u771f\u4e5f\n[00:01.00] \u4f5c\u8bcd : \u9808\u8c37\u5c1a\u5b50\n[00:20.67]\n[00:24.01]\u5b64\u72ec\u306a\u3075\u308a\u3092\u3057\u3066\u308b\u306e? \u306a\u305c\u3060\u308d\u3046 \u6c17\u306b\u306a\u3063\u3066\u3044\u305f\n[00:38.21]\u6c17\u3065\u3051\u3070 \u3044\u3064\u306e\u307e\u306b\u304b \u8ab0\u3088\u308a \u60f9\u304b\u308c\u3066\u3044\u305f\n[00:53.09]\n[00:53.83]\u3069\u3046\u3059\u308c\u3070 \u3053\u306e\u5fc3\u306f \u93e1\u306b\u6620\u308b\u306e?\n[01:06.89]\n[01:07.59]\u5c4a\u304b\u306a\u3044\u604b\u3092\u3057\u3066\u3044\u3066\u3082 \u6620\u3057\u3060\u3059\u65e5\u304c\u304f\u308b\u304b\u306a\n[01:20.68]\u307c\u3084\u3051\u305f\u7b54\u3048\u304c \u898b\u3048\u59cb\u3081\u308b\u307e\u3067\u306f \u4eca\u3082\u3053\u306e\u604b\u306f \u52d5\u304d\u51fa\u305b\u306a\u3044\n[01:40.91]\n[01:56.45]\u521d\u3081\u3066\u58f0\u3092\u304b\u3051\u305f\u3089 \u632f\u308a\u5411\u3044\u3066\u304f\u308c\u305f\u3042\u306e\u65e5\n[02:10.69]\u3042\u306a\u305f\u306f \u7729\u3057\u3059\u304e\u3066 \u307e\u3063\u3059\u3050\u898b\u308c\u306a\u304b\u3063\u305f\n[02:25.41]\n[02:26.20]\u3069\u3046\u3059\u308c\u3070 \u305d\u306e\u5fc3\u306b \u79c1\u3092\u5199\u3059\u306e?\n[02:39.53]\n[02:40.05]\u53f6\u308f\u306a\u3044\u604b\u3092\u3057\u3066\u3044\u3066\u3082 \u5199\u3057\u3060\u3059\u65e5\u304c\u304f\u308b\u304b\u306a\n[02:53.10]\u307c\u3084\u3051\u305f\u7b54\u3048\u304c \u5c11\u3057\u3067\u3082\u898b\u3048\u305f\u3089 \u304d\u3063\u3068\u3053\u306e\u604b\u306f \u52d5\u304d\u59cb\u3081\u308b\n[03:13.62]\n[03:37.38]\u3069\u3046\u3059\u308c\u3070 \u3053\u306e\u5fc3\u306f \u93e1\u306b\u6620\u308b\u306e?\n[03:50.61]\n[03:51.14]\u5c4a\u304b\u306a\u3044\u604b\u3092\u3057\u3066\u3044\u3066\u3082 \u6620\u3057\u3060\u3059\u65e5\u304c\u304f\u308b\u304b\u306a\n[04:04.23]\u307c\u3084\u3051\u305f\u7b54\u3048\u304c \u898b\u3048\u59cb\u3081\u308b\u307e\u3067\u306f \u4eca\u3082\u3053\u306e\u604b\u306f \u52d5\u304d\u51fa\u305b\u306a\u3044\n[04:24.59]\n","transLyric":"[by:\u52a8\u6f2b\u97f3\u4e50\u5a18]\n[00:24.01]\u83ab\u975e\u4f60\u662f\u5728\u6545\u4f5c\u5b64\u72ec\uff1f\u4e3a\u4f55\u5fc3\u5982\u6b64\u4e3a\u4f60\u7275\u52a8\n[00:38.21]\u56de\u8fc7\u795e\u4f86\u4e0d\u77e5\u4e0d\u89c9\u6211\u5df2\u7ecf\u88ab\u4f60\u6df1\u6df1\u5438\u5f15\n[00:53.83]\u8981\u600e\u6837\u624d\u80fd\u5c06\u6211\u7684\u5fc3\u6620\u5728\u955c\u4e2d\u8ba9\u4f60\u770b\u6e05\n[01:07.59]\u5373\u4f7f\u662f\u573a\u7ec8\u6210\u5962\u671b\u7684\u7231\u604b\u662f\u5426\u4e5f\u6709\u6620\u5728\u955c\u4e2d\u7684\u4e00\u5929\n[01:20.68]\u5728\u80fd\u591f\u770b\u89c1\u9690\u7ea6\u7684\u66d9\u5149\u4e4b\u524d\u8fd9\u573a\u7231\u604b\u5982\u4eca\u4f9d\u7136\u5bf8\u6b65\u96be\u884c\n[01:56.45]\u5f53\u6211\u7b2c\u4e00\u6b21\u51fa\u58f0\u76f8\u5524\u5f53\u4f60\u7b2c\u4e00\u6b21\u56de\u9996\u4e4b\u65f6\n[02:10.69]\u4f60\u7684\u8eab\u5f71\u662f\u90a3\u4e48\u8000\u773c\u8ba9\u6211\u4e0d\u5f97\u4e0d\u79fb\u5f00\u76ee\u5149\n[02:26.20]\u8981\u600e\u6837\u624d\u80fd\u5c06\u6211\u7684\u540d\u6df1\u6df1\u6620\u5728\u4f60\u7684\u5fc3\u4e2d?\n[02:40.05]\u5373\u4f7f\u662f\u573a\u6ca1\u6709\u7ed3\u679c\u7684\u7231\u604b\u662f\u5426\u4e5f\u6709\u6620\u5728\u4f60\u5fc3\u7684\u4e00\u5929\n[02:53.10]\u54ea\u6015\u80fd\u770b\u898b\u4e00\u4e1d\u9690\u7ea6\u7684\u66d9\u5149\u8fd9\u4efd\u7231\u604b\u4e00\u5b9a\u80fd\u591f\u5f00\u59cb\u8f6c\u52a8\n[03:37.38]\u8981\u600e\u6837\u624d\u80fd\u5c06\u6211\u7684\u5fc3\u6620\u5728\u955c\u4e2d\u8ba9\u4f60\u770b\u6e05?\n[03:51.14]\u5373\u4f7f\u662f\u573a\u7ec8\u6210\u5962\u671b\u7684\u7231\u604b\u662f\u5426\u4e5f\u6709\u6620\u5728\u93e1\u4e2d\u7684\u4e00\u5929\uff1f\n[04:04.23]\u5728\u80fd\u591f\u770b\u89c1\u9690\u7ea6\u7684\u66d9\u5149\u4e4b\u524d\u8fd9\u573a\u7231\u604b\u5982\u4eca\u4f9d\u7136\u5bf8\u6b65\u96be\u884c","id":"449818930"}]});

前言

又到了白色相簿的季节，给博客加上雪花效果是再好不过的了。
两年前差不多这个时候我介绍过一个插件，可以实现雪花效果。但那个插件基于3JS和jQuery，且CPU消耗过大。
经过寻找后，我找到了一个较为满意的版本Demo，并将其做成了插件形式。
相比两年前的版本，这次的插件有如下特点:

Typecho插件

如果你用的是Typecho，那么只需在Github下载插件并启用即可，通用教程请接着往下看：

通用教程

创建画布

在方便的位置加入以下内容

<canvas id="Snow"></canvas>

引入JS

重要的数值已在注释中给出

(function() {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback) {
        window.setTimeout(callback, 1000 / 60);
    };
    window.requestAnimationFrame = requestAnimationFrame;
})();

(function() {
    var flakes = [],
        canvas = document.getElementById("Snow"), //画布ID，与上一步创建的画布对应
        ctx = canvas.getContext("2d"),
        flakeCount = 200,  //雪花数量，数值越大雪花数量越多
        mX = -100,
        mY = -100;

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    function snow() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        for (var i = 0; i < flakeCount; i++) {
            var flake = flakes[i],
                x = mX,
                y = mY,
                minDist = 150,  //雪花距离鼠标指针的最小值，小于这个距离的雪花将受到鼠标的排斥
                x2 = flake.x,
                y2 = flake.y;

            var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)),
                dx = x2 - x,
                dy = y2 - y;

            if (dist < minDist) {
                var force = minDist / (dist * dist),
                    xcomp = (x - x2) / dist,
                    ycomp = (y - y2) / dist,
                    deltaV = force / 2;

                flake.velX -= deltaV * xcomp;
                flake.velY -= deltaV * ycomp;

            } else {
                flake.velX *= .98;
                if (flake.velY <= flake.speed) {
                    flake.velY = flake.speed
                }
                flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
            }

            ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")";  //雪花颜色
            flake.y += flake.velY;
            flake.x += flake.velX;

            if (flake.y >= canvas.height || flake.y <= 0) {
                reset(flake);
            }

            if (flake.x >= canvas.width || flake.x <= 0) {
                reset(flake);
            }

            ctx.beginPath();
            ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);
            ctx.fill();
        }
        requestAnimationFrame(snow);
    };

    function reset(flake) {
        flake.x = Math.floor(Math.random() * canvas.width);
        flake.y = 0;
        flake.size = (Math.random() * 3) + 2;  //加号后面的值，雪花大小，为基准值，数值越大雪花越大
        flake.speed = (Math.random() * 1) + 0.5;  //加号后面的值，雪花速度，为基准值，数值越大雪花速度越快
        flake.velY = flake.speed;
        flake.velX = 0;
        flake.opacity = (Math.random() * 0.5) + 0.3;  //加号后面的值，为基准值，范围0~1
    }

    function init() {
        for (var i = 0; i < flakeCount; i++) {
            var x = Math.floor(Math.random() * canvas.width),
                y = Math.floor(Math.random() * canvas.height),
                size = (Math.random() * 3) + 2,  //加号后面的值，雪花大小，为基准值，数值越大雪花越大
                speed = (Math.random() * 1) + 0.5,  //加号后面的值，雪花速度，为基准值，数值越大雪花速度越快
                opacity = (Math.random() * 0.5) + 0.3;  //加号后面的值，为基准值，范围0~1

            flakes.push({
                speed: speed,
                velY: speed,
                velX: 0,
                x: x,
                y: y,
                size: size,
                stepSize: (Math.random()) / 30 * 1,  //乘号后面的值，雪花横移幅度，为基准值，数值越大雪花横移幅度越大，0为竖直下落
                step: 0,
                angle: 180,
                opacity: opacity
            });
        }

        snow();
    };

    document.addEventListener("mousemove", function(e) {
        mX = e.clientX,
        mY = e.clientY
    });
    window.addEventListener("resize", function() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    });
    init();
})();

添加样式（Style）

背景颜色可根据自身需要改变

#Snow{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: rgba(125,137,95,0.1);
    pointer-events: none;
}