某日搜索文章，误入了别人家的blog，发现有个动态特效还挺不错，网页中会动态随机生成许多的点和线条，鼠标停留的地方会自动吸附这些线条，构成动态的几何图形。这么酷炫的效果怎能错过呢，打算“借鉴”到我的blog来。不过，翻遍了那位仁兄的blog，也没有看到相关的介绍，无奈只有分析一下他家的blog代码，原来是在网页中创建了一个巨大的canvas，设置透明度为50%，并且设置z-index为-1，让它位置在blog正文的下方。最后，通过一个叫mouse.js来实现动态的几何图形绘制和移动等效果。
于是乎，开始动手，三下五除二的把这个酷炫特技“移植”了过来……
大致实现步骤：
- 找到blog页面模板，在页面底部位置，插入一个canvas：
1 | <canvas id="c_n1" width="1280" height="515" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"> |
- 在页面中引入和加载mouse.js：
1 | <script type="text/javascript" src="/js/src/mouse.js?v=5.1.0"></script> |
JS脚本点击这里获取，上传并放入到网站指定位置。
- 保存更改并更新
由于我是用的Hexo，所以重新生成站点即可预览效果。嗯，效果还不错，我喜欢……
