听说冬天和雪花更配哦
首先，一首届不到的恋送给大家：
cPlayerOptions.push({"id":8,"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;
}文章来源：
Author：journey.ad
link：https://imjad.cn/archives/code/sounds-winter-and-snowflakes-are-more-compatible