为Blog加上动态几何酷炫特技

某日搜索文章,误入了别人家的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,所以重新生成站点即可预览效果。嗯,效果还不错,我喜欢……

支持原创技术分享,据说打赏我的人,都找到了女朋友!