1. 程式人生 > 其它 >vue外掛-粒子動態背景

vue外掛-粒子動態背景

安裝vue-particles
cnpm install vue-particles

全域性配置vue-particles[ 在main.js裡面:]

import VueParticles from 'vue-particles'
Vue.use(VueParticles)
使用vue-particles【 在vue檔案template標籤中】
<vue-particles
        id="particles-js"        /* 此處可以手動定義id為預設值particles-js,也可以不寫 */
        /* 圓點設定:                顏色、透明度、數量、外形、大小 
*/ color="#fff" :particleOpacity="0.7" :particlesNumber="60" shapeType="circle" :particleSize="4" /* 線的設定: 顏色、線寬、、透明度、最大連線距離、移動速度,等等 */ linesColor="#fff" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance
="150" :moveSpeed="2" :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push" class="lizi" //此處又定義了一個類class,也可以通過它設定粒子樣式 > </vue-particles>
具體引數配置 根據id調整樣式 vue-particles有一個id為預設為particles-js,可以根據這個id來設定樣式
#particles-js{
        width: 
100%; height: calc(100% - 100px); position: absolute; //設定absolute,其他DIV設定為relative,這樣這個例子效果就作為背景 }

根據自定義的class名稱lizi設定樣式

smile