vue外掛-粒子動態背景
阿新 • • 發佈:2021-10-27
安裝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,也可以不寫 */ /* 圓點設定: 顏色、透明度、數量、外形、大小具體引數配置 根據id調整樣式 vue-particles有一個id為預設為particles-js,可以根據這個id來設定樣式*/ 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>
#particles-js{ width:100%; height: calc(100% - 100px); position: absolute; //設定absolute,其他DIV設定為relative,這樣這個例子效果就作為背景 }