当前位置: 首页 > Web前端 > vue.js

干货:vue粒子特效(vue-particles插件)

时间:2023-03-31 16:10:38 vue.js

image.png类似于星座图的点和线是由vue-particles生成的,它不仅会自己移动,还会和用户鼠标事件交互。我一直很喜欢这种动态插件。今天有空,迫不及待的试了一波~NICE~使用教程:npminstallvue-particles--save-devmain.js添加如下代码:importVueParticlesfrom'vue-particles'App。vue文件-完整示例:/*如果要制作背景图,可以直接在label中添加背景图,带class*/Attribute:color:String类型。默认“#dedede”。颗粒颜色。particleOpacity:数字类型。默认值为0.7。粒子透明度。particlesNumber:数字类型。默认值为80。粒子数。shapeType:字符串类型。默认为“圆”。可用的粒子外观类型有:“圆形”、“边缘”、“三角形”、“多边形”、“星形”。particleSize:数字类型。默认值为80。单个粒子大小。linesColor:字符串类型。默认“#dedede”。线条颜色。linesWidth:数字类型。默认值为1.线宽。lineLinked:布尔类型。默认为真。电缆是否可用。lineOpacity:数字类型。默认值为0.4。线条透明度。linesDistance:数字类型。默认值为150。行距。moveSpeed:数字类型。默认值3。粒子速度。hoverEffect:布尔型。默认为真。是否有悬停效果。hoverMode:字符串类型。默认为真。可用的悬停模式有:“抓取”、“击退”、“泡泡”。点击效果:布尔型。默认为真。是否有点击效果。clickMode:字符串类型。默认为真。可用的点击模式有:“推”、“移除”、“排斥”、“泡泡”。微信公众号:回复我的web前端自助之路,进群,一起和大佬交流技术