vue粒子特效

vue中使用vue-particles实现背景粒子炫酷效果

在原生中见到这种特效，vue 的项目中也想用，就发现了这个，比原生中的好用多了，简单记录一下
出处：https://www.jianshu.com/p/53199b842d25

效果

安装使用

安装：

npm install vue-particles --save-dev 

main.js里加入以下代码：

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

在需要背景的页面中添加，或者直接在App.vue中添加

<vue-particles
  color="#fff" //默认'#dedede'。粒子颜色
  :particleOpacity="0.7" //默认0.7。粒子透明度
  :particlesNumber="60"//默认80。粒子数量
  shapeType="circle"//默认'circle'。可用的粒子外观类型有："circle圆","edge正方形","triangle三角形", "polygon五边形","star五角星"
  :particleSize="4"//默认80。单个粒子大小
  linesColor="#fff"//默认'#dedede'。线条颜色
  :linesWidth="1"//默认1。线条宽度
  :lineLinked="true"//默认true。连接线是否可用
  :lineOpacity="0.4"//默认0.4。线条透明度
  :linesDistance="150"//默认150。线条距离
  :moveSpeed="2"//默认3。粒子运动速度
  :hoverEffect="true"//默认true。是否有hover特效
  hoverMode="grab"//默认true。可用的hover模式有: "grab", "repulse", "bubble"
  :clickEffect="true"//默认true。是否有click特效
  clickMode="push"//默认true。可用的click模式有: "push", "remove", "repulse", "bubble"
  class="lizi"
>

需要对离子背景做其他样式修改时可在类.lizi中修改

.lizi{
  width: 100%;
  height: 108%;
  position:absolute;
  left:0;
  top:0;
  /* z-index: -1; */
  background-image:radial-gradient(#002953, #041222); //添加渐变背景颜色
}