Canvas-nest.js - 网页粒子背景插件

Canvas-nest.js - 网页粒子背景插件

2024-03-17

4.38K

GitHub

Canvas-nest.js是一个非常好看的网页粒子背景插件,不需要依赖任何第三方库即可运行,提供额非常炫酷的背景。

特性

不依赖任何框架或者内库,比如不依赖 jQuery,使用原生的 javascript。
非常小,只有1.6 kb,如果开启 gzip,可以更小。
非常容易实现,配置简单,即使你不是web开发者,也能简单搞定。

使用方法

使用非常简单,感觉都没有必要写这一节内容。

将下面的代码插入到<body></body> 之间.

<script type="text/javascript" src="/canvas-nest.min.js"></script>
强烈建议在 </body> 标签上方. 

请注意不要将代码置于 <head>...</head>里面.
然后就完成了,打开网页即可看到效果!


配置和配置项

color: 线条颜色, 默认: '0,0,0' ;三个数字分别为(R,G,B),注意用,分割
opacity: 线条透明度(0~1), 默认: 0.5
count: 线条的总数量, 默认: 150

zIndex: 背景的z-index属性,css属性用于控制所在层的位置, 默认: -1

这些属性配置在引用js的script标签中,作为它的一个属性值。所有的配置项都有默认值,如果你不知道怎么设置,可以先不设置这些配置项,就使用默认值看看效果也可以的。

Example:

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

这些属性配置在引用 js 的 script 标签中,作为它的一个属性值。所有的配置项都有默认值,如果你不知道怎么设置,可以先不设置这些配置项,就使用默认值看看效果也可以的。

或者模块化调用的时候,config 参数写成:

{
  color: '0,0,255',
  opacity: 0.7,
  zIndex: -2,
  count: 99,
};




1. 本站所有资源来源于网络和用户上传!如有侵权请邮件联系客服!sys(at)hoohtml.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!
3. 本由本站提供的程序对您的网站或计算机造成严重后果的本站概不负责。