vue中利用particlesJS实现鼠标动画粒子连线效果
最近做后台管理系统,发现一款散射的原子颗粒特效插件,效果不错,使用到了项目中。
一、安装:
npm i particles.js --S
二、演示:
https://zhangyongwnag.github.io/Framework_mamage/dist/#/Login
三、使用:
①:创建组件:ParticlesJS.vue
②:引入执行
③:配置参数
四、配置参数:
参数 | 说明 |
---|---|
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