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

一、安装:

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

Logo

前往低代码交流专区

更多推荐