Vue粒子特效（Vue-particles插件的使用）

我们经常看到这种效果的动图，有时候我们也想在页面显示出来，让我们一起来看看怎么在自己的页面中显示这种动态的粒子图片

它主要运用了vue-particles插件、

使用教程

安装插件

npm install vue-particles

在main.js加入以下代码

//引入粒子背景插件import VueParticles from 'vue-particles'//安装插件Vue.use(VueParticles)

3.App.vue中一个完整的例子

<template><div id="app"><div id="nav"><vue-particlescolor="#555":particleOpacity="0.7":particlesNumber="150"shapeType="circle":particleSize="4"linesColor="#555":linesWidth="1":lineLinked="true":lineOpacity="0.4":linesDistance="150":moveSpeed="1":hoverEffect="true"hoverMode="grab":clickEffect="false"clickMode="push"class="lizi"/></div><router-view></router-view></div></template><style>body {width: 100%;margin: 0;padding: 0;}.lizi{background-color: #FFB6C1;position:fixed;top:0;width:100%;}</style>

最后我们就可以看见效果图了。

对各个属性的相关说明：

color: String类型。默认’#dedede’。粒子颜色。particleOpacity: Number类型。默认0.7。粒子透明度。particlesNumber: Number类型。默认80。粒子数量。shapeType: String类型。默认’circle’。可用的粒子外观类型有：“circle”,“edge”,“triangle”,“polygon”,“star”。particleSize: Number类型。默认80。单个粒子大小。linesColor:String类型。默认’#dedede’。线条颜色。linesWidth: Number类型。默认1。线条宽度。lineLinked:布尔类型。默认true。连接线是否可用。lineOpacity: Number类型。默认0.4。线条透明度。linesDistance: Number类型。默认150。线条距离。moveSpeed: Number类型。默认3。粒子运动速度。hoverEffect: 布尔类型。默认true。是否有hover特效。hoverMode: String类型。默认true。可用的hover模式有: “grab”, “repulse”, “bubble”。clickEffect: 布尔类型。默认true。是否有click特效。clickMode: String类型。默认true。可用的click模式有: “push”, “remove”, “repulse”, “bubble”。