vue-particles實現粒子特效背景
實現效果

一、下載安裝 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"
我其實也有努力呀

浙公網安備 33010602011771號