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

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

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

使用教程

1. 安装插件

npm install vue-particles

2. 在main.js加入以下代码

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

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

<template>
 <div id="app">
   <div id="nav">
     <vue-particles
         color="#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”。