vue粒子特效——实现炫酷页面

1.认识 vue-particles官网

2.使用 vue-particles官网

1. 安装

   npm install vue-particles --save-dev
   

2. 引入 Main.js file

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

3. 简单的例子

   <template>
       <div id="app">
         <vue-particles color="#dedede"></vue-particles>
       </div>
   </template>
   

4. 项目使用

   <template>
       <div id="app">
          <vue-particles
           color="#000"
           :particleOpacity="0.7"
           :particlesNumber="80"
           shapeType="circle"
           :particleSize="4"
           linesColor="#000"
           :linesWidth="1"
           :lineLinked="true"
           :lineOpacity="0.4"
           :linesDistance="80"
           :moveSpeed="2"
           :hoverEffect="true"
           hoverMode="grab"
           :clickEffect="false"
           clickMode="bubble"
         >
         </vue-particles>
       </div>
   </template>
   

5. 项目效果
   

6. 属性说明