VUE中的粒子特效，点和线连接，类似星座，vue-particles

先看效果图：

使用方式：

npm install vue-particles --save-dev  

main.js中加入

import VueParticles from 'vue-particles'  
Vue.use(VueParticles) 

在某个.vue文件中

 <vue-particles
      color="#1256e6"
      :particleOpacity="1" //   粒子透明度
      :particlesNumber="60" // 粒子数量
      shapeType="circle" // 粒子形状,可用的粒子外观类型有："circle","edge","triangle", "polygon","star"。
      :particleSize="4"  // 粒子大小
      linesColor="#1256e6" // 粒子间连线颜色
      :linesWidth="1" // 粒子间连线宽度
      :lineLinked="true" // 连线是否可用
      :lineOpacity="0.7" // 连线透明度
      :linesDistance="150" // 线条距离
      :moveSpeed="2" // 移动速度
      :hoverEffect="true" // 是否有hover效果
      hoverMode="grab" //  hover模式,可用的hover模式有: "grab", "repulse", "bubble"。
      :clickEffect="true" //  是否有click特效
      clickMode="push" // 可用的click模式,可用的click模式有: "push", "remove", "repulse", "bubble"。
      class="lizi" //
    ></vue-particles>  /*如果想做背景图片 可以给标签一个class 直接添加背景图*/