超炫背景粒子插件particlesjs

基于html5 canvas的轻量级炫酷js粒子动画库插件。该js粒子动画库插件可以设置粒子的形状、旋转、分布、颜色等属性，还可以动态添加粒子，效果非常酷。 IE9+
particlesjs-GitHub
在线Demo预览
 CND

安装

npm install particlesjs --save

使用

<!-- HTML标签 -->
<body>
	<canvas class="background"></canvas>
</body>

<!-- 设置样式 -->
.background {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  z-index: 0;
}

初始哈粒子效果：

import Particles from "particlesjs";

mounted() {
    this.$nextTick(() => { 
        Particles.init({
        	selector: ".background"
        });
    });
}

Options 选项

Option	Type	Default	Description
`selector`	string	-	*【必填】画布元素的CSS选择器
`maxParticles`	integer	`100`	粒子的最大数量
`sizeVariations`	integer	`3`	尺寸变化量
`speed`	integer	`0.5`	粒子的移动速度
`color`	string or string[]	`#000000`	粒子和连接线的颜色
`minDistance`	integer	`120`	连接线的距离，单位为“px”
`connectParticles`	boolean	`false`	是否应绘制连接线
`responsive`	array	`null`	包含断点和选项的对象数组

公共方法

方法	描述
`pauseAnimation`	暂停/停止粒子动画
`resumeAnimation`	继续粒子动画
`destroy`	销毁插件

// 暂停动画
function pause() {
    Particles.pauseAnimation();
}
// 继续动画
function resume() {
    Particles.resumeAnimation()
}
// 销毁
Particles.destory()