某日搜索文章，误入了别人家的blog，发现有个动态特效还挺不错，网页中会动态随机生成许多的点和线条，鼠标停留的地方会自动吸附这些线条，构成动态的几何图形。这么酷炫的效果怎能错过呢，打算“借鉴”到我的blog来。不过，翻遍了那位仁兄的blog，也没有看到相关的介绍，无奈只有分析一下他家的blog代码，原来是在网页中创建了一个巨大的canvas，设置透明度为50%，并且设置z-index为-1，让它位置在blog正文的下方。最后，通过一个叫mouse.js来实现动态的几何图形绘制和移动等效果。

于是乎，开始动手，三下五除二的把这个酷炫特技“移植”了过来……

大致实现步骤：

• 找到blog页面模板，在页面底部位置，插入一个canvas：

1
2

<canvas id="c_n1" width="1280" height="515" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;">
</canvas>

• 在页面中引入和加载mouse.js：

1

<script type="text/javascript" src="/js/src/mouse.js?v=5.1.0"></script>

JS脚本点击这里获取，上传并放入到网站指定位置。

• 保存更改并更新

由于我是用的Hexo，所以重新生成站点即可预览效果。嗯，效果还不错，我喜欢……