vue中利用particlesJS实现鼠标动画粒子连线效果

最近做后台管理系统,发现一款散射的原子颗粒特效插件,效果不错,使用到了项目中。

一、安装:

npm i particles.js --S

二、演示:

https://zhangyongwnag.github.io/Framework_mamage/dist/#/Login
vue中利用particlesJS实现鼠标动画粒子连线效果
三、使用:

①:创建组件:ParticlesJS.vue
vue中利用particlesJS实现鼠标动画粒子连线效果
②:引入执行
vue中利用particlesJS实现鼠标动画粒子连线效果
③:配置参数
vue中利用particlesJS实现鼠标动画粒子连线效果
四、配置参数:

参数 说明
particles.number 粒子的数量、分布密度
particles.color 粒子的颜色
particles.shape 粒子的形状、可自定义图片
particles.opacity 粒子的透明度、渐变随机动画
particles.size 粒子的大小
particles.line_linked 连接线的狙击、颜色、不透明度
particles.move 原子的移动方向、边界、吸引动画
interactivity.detect_on 原子之间互动检测
interactivity.events 原子点击动画效果
interactivity.modes 原子互动、击退动画效果

五、链接:
particlesJS:https://github.com/VincentGarreau/particles.js
项目源码:https://github.com/zhangyongwnag/Framework_mamage