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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小小白zyw

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值