canvas-nest.js

canvas-nest.js

 

只需在页面加入js就可以直接使用canvas,效果为粒子运动,会跟随鼠标运动并汇聚,最终会汇聚成一个圆形。

<script type="text/javascript" color="255,255,255" opacity='0.9' zIndex="999" count="199" 
src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>

其中的参数。
color为粒子的颜色。
opacity为粒子的不透明度。
zIndex为粒子的堆叠顺序。
count为粒子的计数。

 

完整代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
		*{
			margin: 0;//消除页面浮动
			padding: 0;
			background-image: linear-gradient(#f79,#79f);//从上而下的渐变色
		}
		</style>
	</head>
	<body>
		<script type="text/javascript" color="255,255,255" opacity='0.9' zIndex="999" count="199" 
		src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
	</body>
</html>
效果图如下
posted @ 2021-05-12 18:55  luohuasheng  阅读(394)  评论(0编辑  收藏  举报