博客近期在网页背景上增加了特效，就是网页左右两侧的蓝色的运动像素点
这是一个基于html5 canvas绘制的网页背景效果，效果非常赞，表示第一次我玩了十分钟，hhh
作者github：https://github.com/hustcc/canvas-nest.js

使用方法：
将下面的代码插入到网站主题的 <body> 和 </body> 之间即可，建议放到主题模板的 footer中

<script type="text/javascript" color="102,185,255" opacity="50" zIndex="-2" count="99" src="//static.ffis.me/javascript/canvas-nest.min.js"></script>

上述代码中的JS调用地址//static.ffis.me/javascript/canvas-nest.min.js建议转存到你自己的服务器上进行调用，我CDN上的指不定什么时候会挂掉

属性配置项：

  • color: 线条颜色, 默认: '0,0,0' ；三个数字分别为(R,G,B)，注意用,分割
  • opacity: 线条透明度（0~1）, 默认: 0.5
  • count: 线条的总数量, 默认: 150
  • zIndex: 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1

该特效使用的前提是网页背景必须位于前台页面的下方，不然效果被网页背景遮挡了那么在前台看不到任何东西。

例如本页面正文内容就不会看到这个特效，但鼠标划过特效依然还在正常运行但经过正文时看不到效果的。

由于我的主题使用此代码在手机上效果不是很好，所以我加了个判断只在PC端使用此代码，屏幕小的话是不会加载这个js的。
有需要的可以参考下

<script>
if (screen && screen.width > 480) {
  document.write('<script type="text/javascript" color="102,185,255" opacity="50" zIndex="-2" count="99" src="//static.ffis.me/javascript/canvas-nest.min.js"><\/script>');
}
</script>