[博客美化]新年啦，给自己博客加个雪花效果吧~

前言

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

效果预览

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

食用方法

• 添加js文件

&＃xff08;1&＃xff09;前提是开通了权限哦&＃xff0c;然后把 xue.js文件上传到自己博客中&＃xff1b;
&＃xff08;2&＃xff09;创建画布(放在页尾)&＃xff1b;

• 引入js文件(放在页尾)&＃xff1b;

js文件&＃xff1a;

(function() {var requestAnimationFrame &＃61; window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||function(callback) {window.setTimeout(callback, 1000 / 60);};window.requestAnimationFrame &＃61; requestAnimationFrame;
})();(function() {var flakes &＃61; [],canvas &＃61; document.getElementById("Snow"), //画布ID&＃xff0c;与上一步创建的画布对应ctx &＃61; canvas.getContext("2d"),flakeCount &＃61; 200, //雪花数量&＃xff0c;数值越大雪花数量越多mX &＃61; -100,mY &＃61; -100;canvas.width &＃61; window.innerWidth;canvas.height &＃61; window.innerHeight;function snow() {ctx.clearRect(0, 0, canvas.width, canvas.height);for (var i &＃61; 0; i &＃61; canvas.height || flake.y <&＃61; 0) {reset(flake);}if (flake.x >&＃61; canvas.width || flake.x <&＃61; 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 &＃61; Math.floor(Math.random() * canvas.width);flake.y &＃61; 0;flake.size &＃61; (Math.random() * 3) &＃43; 2; //加号后面的值&＃xff0c;雪花大小&＃xff0c;为基准值&＃xff0c;数值越大雪花越大flake.speed &＃61; (Math.random() * 1) &＃43; 0.5; //加号后面的值&＃xff0c;雪花速度&＃xff0c;为基准值&＃xff0c;数值越大雪花速度越快flake.velY &＃61; flake.speed;flake.velX &＃61; 0;flake.opacity &＃61; (Math.random() * 0.5) &＃43; 0.3; //加号后面的值&＃xff0c;为基准值&＃xff0c;范围0~1}function init() {for (var i &＃61; 0; i })();添加样式

• 添加样式&＃xff08;自定义css&＃xff0c;背景颜色可以自己改变&＃xff09;&＃xff1b;

#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 文件&＃xff1a; https://files.cnblogs.com/files/yjlblog/xue.js

声明

部分资源来源网络 版权归&＃64; 猫与向日葵 所有&＃xff0c;如有写的不对之处&＃xff0c;欢迎大家指正~~感激不尽~