zblog添加飘雪特效

新的一年又即将开始了，你喜欢的妹纸追到了嘛，今天下班看到一些博客有飘雪特效，于是博主就参考了下顺便分享咯！配合网站节日背景特效效果更好

博主用的是Zblog，所以此特效以Zblog为例其他程序自测

找到主题模板根目录下的底部文件footer.php 在适当位置加入以下代码

ps：如果你使用的是宁静致远主题模板可以在后台→主题配置→广告设置把以下代码复制粘贴进去即可

<script src="//网址域名/xue.js" defer></script><div class="snow"><canvas id="snow"></canvas></div>

下一步到主机根目录创建个js文件，并命名为xue.js如图：

创建好了复制以下代码进去xue.js文件里面

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) + 3;  //加号后面的值，雪花大小，为基准值，数值越大雪花越大         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) + 3,  //加号后面的值，雪花大小，为基准值，数值越大雪花越大                 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代码，复制以下css代码到模板全局css文件里也可以放到footer.php里面，或其他主题设置自定义css

css代码

.snow {     display: block;}#snow {     position: fixed;     top: 0;     left: 0;     width: 100%;     height: 100%;     z-index: 9999;     pointer-events: none;}

如果不会css代码的朋友可以参考下这遍文章：配合网站节日背景特效效果更好

然后在后台首页清除缓存即可。