首先介紹一下屬性
// vue-particles的屬性:
color: // String類型。默認(rèn)’#dedede’。粒子顏色。
particleOpacity: // Number類型。默認(rèn)0.7。粒子透明度。
particlesNumber: // Number類型。默認(rèn)80。粒子數(shù)量。
shapeType: // String類型。默認(rèn)’circle’。可用的粒子外觀類型有:“circle”,“edge”,“triangle”, “polygon”,“star”。
particleSize: // Number類型。默認(rèn)80。單個粒子大小。
linesColor: // String類型。默認(rèn)’#dedede’。線條顏色。
linesWidth: // Number類型。默認(rèn)1。線條寬度。
lineLinked: // 布爾類型。默認(rèn)true。連接線是否可用。
lineOpacity: // Number類型。默認(rèn)0.4。線條透明度。
linesDistance: // Number類型。默認(rèn)150。線條距離。
moveSpeed: // Number類型。默認(rèn)3。粒子運(yùn)動速度。
hoverEffect: // 布爾類型。默認(rèn)true。是否有hover特效。
hoverMode: // String類型。默認(rèn)true??捎玫膆over模式有: “grab”, “repulse”, “bubble”。
clickEffect: // 布爾類型。默認(rèn)true。是否有click特效。
clickMode: // String類型。默認(rèn)true。可用的click模式有: “push”, “remove”, “repulse”, “bubble”
npm install 進(jìn)行下載
npm install vue-particles
成功之后
main.js
import VueParticles from 'vue-particles'
Vue.use(VueParticles)
頁面
<vue-particles
color="#8EB5C9"
:particleOpacity="0.9"
:particlesNumber="80"
shapeType="circle"
:particleSize="6"
linesColor="#8EB5C9"
:linesWidth="1"
:lineLinked="true"
:lineOpacity="0.6"
:linesDistance="150"
:moveSpeed="3"
:hoverEffect="true"
hoverMode="grab"
:clickEffect="true"
clickMode="push"
>
</vue-particles>
css樣式
#particles-js {
width: 100%;
height: calc(100% - 100px);
position: absolute;
}
最后來一張效果圖
在這里插入圖片描述