vue-particles實現粒子特效背景
阿新 • • 發佈:2021-08-23
實現效果
一、下載安裝 vue-partilces
npm install vue-particles --save-dev
main.js
import VueParticles from 'vue-particles'
Vue.use(VueParticles)
二、實現效果
在需要實現粒子效果的頁面中加入以下程式碼
<vue-particles id="particles-js" color="#5E6DC4" :particle-opacity="0.7" :particles-number="60" :particle-size="4" shape-type="circle" lines-color="#4856A1" :lines-width="1" :line-linked="true" :line-opacity="4" :lines-distance="150" :move-speed="7" :hover-effect="true" hover-mode="grab" :click-effect="true" click-mode="push"></vue-particles>
<style lang="less" scoped>
#父級盒子{
background-color: #161E4B;
position: relative;
}
#particles-js{ width: 100%; height: calc(100%); position: absolute; } </style>
三、vue-particles引數
- color: String型別。 預設'#dedede'。粒子顏色。
- particleOpacity: Number型別。 預設0.7。粒子透明度。
- particlesNumber: Number型別。 預設80。粒子數量。
- shapeType: String型別。 預設'circle'。可用的粒子外觀型別有:"circle","edge","triangle", "polygon","star"。
- particleSize: Number型別。 預設80。單個粒子大小。
- linesColor: String型別。 預設'#dedede'。線條顏色。
- linesWidth: Number型別。 預設1。線條寬度。
- lineLinked: 布林型別。 預設true。連線線是否可用。
- lineOpacity: Number型別。 預設0.4。線條透明度。
- linesDistance: Number型別。 預設150。線條距離。
- moveSpeed: Number型別。 預設3。粒子運動速度。
- hoverEffect: 布林型別。 預設true。是否有hover特效。
- hoverMode: String型別。 預設true。可用的hover模式有: "grab", "repulse", "bubble"。
- clickEffect: 布林型別。 預設true。是否有click特效。
- clickMode: String型別。 預設true。可用的click模式有: "push", "remove", "repulse", "bubble"