超赞网页粒子背景插件canvas-nest的使用方法

时间:2024-10-12 07:56:23

1、首先要下载一个canvas-nest.js文件,这个下载,大家百度一下就可以下载到。这介绍使用,其中的具体原理就不再这讲述了。

超赞网页粒子背景插件canvas-nest的使用方法

2、建立一个html文件,文件引入这个js文件即可,但是引入的位置需要注意。不能放到<head>标签中,应该放到<body>标签中。

超赞网页粒子背景插件canvas-nest的使用方法

3、使用浏览器打开这个html文件查看效果是否出来了。

超赞网页粒子背景插件canvas-nest的使用方法

4、这个动态背景,是许多粒子在无规则的运动着,其中如果两个粒子的距离较近的时候,两个粒子中间就会产生一个线段。如图所示:

超赞网页粒子背景插件canvas-nest的使用方法

5、当你的鼠标在页面上停留在页面上的某个位置不动的时候,这些粒子在靠近鼠标的时候,会被吸引住,不再离开,并且最终会形成一个圆形动态图案。当你鼠标再次移动的时候,圆形图案随即解体。

超赞网页粒子背景插件canvas-nest的使用方法

6、粒子间线条颜色的设置,在引入的标签中的罕铞泱殳color指定。<script type="text/javascript" color="255,0,0" zindex="-1" opacity="1" count="99" src="canvas-nest.min.js"></script>

超赞网页粒子背景插件canvas-nest的使用方法
超赞网页粒子背景插件canvas-nest的使用方法
© 手抄报圈