[聚合文章] 【博客美化】新年啦，给自己博客加个雪花效果吧~

前言

今天是2017 的最后一天，首先祝福大家新年快乐，能在自己新的一年里开心快乐，幸福~。转眼间，又到了白雪飘飞的冬季，相信好多地方都下雪了吧~，突发奇想，给自己博客加上了雪花飘落效果。当然了，有写的不好的地方，大家打我就好~~

效果预览

http://www.cnblogs.com/yjlblog/ (本来想着上传一个gif..好像是太大了...就上传失败了)

食用方法

• 添加js文件

（1）前提是开通了权限哦，然后把 xue.js文件上传到自己博客中；
（2）创建画布(放在页尾)；

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

• 引入js文件(放在页尾)；

<script src="https://files.cnblogs.com/files/yjlblog/xue.js"></script>

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();})();添加样式

• 添加样式（自定义css，背景颜色可以自己改变）；

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

相关文件

• js 文件： https://files.cnblogs.com/files/yjlblog/xue.js

声明

部分资源来源网络，如有写的不对之处，欢迎大家指正~~感激不尽~