Vue动态粒子特效插件（背景线条吸附动画）

目录

效果图：

一、安装：

二、引入 main.js 文件：

 三、使用：

 四、属性说明：

---

效果图：

 

 

 一、安装：

npm install vue-particles --save

二、引入 main.js 文件：

import VueParticles from 'vue-particles'  
Vue.use(VueParticles)

 三、使用：

    <vue-particlesclass="login-background"color="#409EFF":particleOpacity="0.7":particlesNumber="60"shapeType="circle":particleSize="6"linesColor="#409EFF":linesWidth="1":lineLinked="true":lineOpacity="0.4":linesDistance="150":moveSpeed="3":hoverEffect="true"hoverMode="grab":clickEffect="true"clickMode="push"></vue-particles>

.login-background {//可设置背景图 铺满屏background: linear-gradient(-180deg, #dceaf2 0%, #ffffff 100%);width: 100%;height: 100%;position: absolute;
}

 四、属性说明：

属性	类型	说明
color	String	粒子颜色（默认：#dedede）
particleOpacity	Number	粒子透明度（默认：0.7）
particlesNumber	Number	粒子数量（默认：80）
shapeType	String	粒子外观类型（默认：circle，全部：circle，edge，triangle，polygon，star）
particleSize	Number	单个粒子大小（默认：80）
linesColor	String	线条颜色（默认：#dedede）
linesWidth	Number	线条宽度（默认：1）
lineLinked	Boolean	连接线是否可用（默认：true）
lineOpacity	Number	线条透明度（默认：0.4）
linesDistance	Number	线条距离（默认：150）
moveSpeed	Number	粒子运动速度（默认：3）
hoverEffect	Boolean	是否有hover特效（默认：true）
hoverMode	String	hover模式类型（grab，repulse，bubble）
clickEffect	Boolean	是否有click特效（默认：true）
clickMode	String	click模式类型（push，remove，repulse，bubble）