Vue粒子特效（vue-particles插件）

参考链接:https://www.jianshu.com/p/53199b842d25
实现的效果图：

image.png

1.下载插件
npm install vue-particles --save-dev

2.在main.js里加这个代码

//引入粒子效果开始
import VueParticles from "vue-particles"
Vue.use(VueParticles)
//引入粒子效果结束

3.在login登录页的index.vue写入这个代码:

<vue-particles
  class="canvas" 
 color="#5285c6" 
 :particle-opacity="0.7" 
 :particles-number="80" 
  shape-type="circle"
 :particle-size="5" 
 lines-color="#5285c6" 
:lines-width="1"
 :line-linked="true"
 :line-opacity="0.4" 
:lines-distance="150" 
:move-speed="7" :hover-effect="true" 
hover-mode="grab" 
:click-effect="true"
 click-mode="push" 
style="height: 100vh" 
/>

4.样式修改

  .login-form {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 520px;
    max-width: 100%;
    padding: 160px 35px 0;
    margin: 0 auto;
    overflow: hidden;
  }