为你的 HTML 网页添加高颜值粒子线条特效
次阅读
2 min read
超高颜值粒子特效背景添加教程
一个基于 html5 canvas 绘制的网页背景效果
你也可以直接访问这个项目的 Github[1] 进行查看文档。
或者访问演示网址进行在线查看。
这篇文章已经使用了这个项目，你可以直接预览效果。
使用方法
插入代码
将这段代码插入你 HTML 的
和 之间。- 这是项目原始代码：
<script type="text/javascript" src="canvas-nest.min,js"></script>
如果使用 Github 项目中的代码，需要提前下载 canvas-nest.min.js 这个 js 文件。
<script src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
注意请勿插入到 <head> 和 </head> 之间
配置
- color: 线条颜色, 默认:
'0,0,0'；三个数字分别为(R,G,B)，注意用,分割 - pointColor: 交点颜色, 默认:
'0,0,0'；三个数字分别为(R,G,B)，注意用,分割 - opacity: 线条透明度（0~1）, 默认:
0.5 - count: 线条的总数量, 默认:
150 - zIndex: 背景的z-index属性，css属性用于控制所在层的位置, 默认:
-1
Example
<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="dist/canvas-nest.js"></script>