博客近期在网页背景上增加了特效,就是网页左右两侧的蓝色的运动像素点
这是一个基于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>