为网站添加Canvas-nest动态背景效果

请注意,本文编写于 294 天前,最后修改于 294 天前,其中某些信息可能已经过时。

之前在用Hexo博客的时候在一款叫做Next的主题中看到了这个动态背景,感觉挺不错的。今天突然想起来把它用到Typecho上,就去找了一下。

项目地址:https://github.com/hustcc/canvas-nest.js

使用方法

在网页的<body></body>标签之间加入以下代码,最好放在最后一行

<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>

自定义选项

  • color:线条颜色,默认:'0,0,0';三个数字分别为(R,G,B),注意用,分割
  • opacity:线条透明度(0~1),默认:0.5
  • count:线条的总数量,默认:150
  • zIndex:背景的z-index属性,css属性用于控制所在层的位置, 默认:-1。值越大,显示的层面离用户越近。

示例

<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>

演示地址:https://git.hust.cc/canvas-nest.js/

添加新评论