Vue粒子特效(vue-particles插件)

參考鏈接:http://www.lxweimin.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;
  }
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容