粒子效果是一個(gè)很好玩很有趣的東西，前幾天有人問我vue怎么使用粒子效果，其實(shí)vue使用一些簡(jiǎn)單粒子效果很容易旬牲，下面給大家上代碼。
?對(duì)搁吓！之前有人問我vue封裝的模態(tài)框?yàn)槭裁捶且胘q和操作dom原茅，其實(shí)根本不需要，那篇文章只是為了這個(gè)要求堕仔，vue里的transition標(biāo)簽擂橘，其實(shí)我們使用這個(gè)標(biāo)簽就可以做很多的東西。
以下粒子效果也只是一些簡(jiǎn)單的效果
1摩骨、下載依賴
npm install vue-particles --save-dev
2通贞、main引入
import VueParticles from 'vue-particles'
Vue.use(VueParticles)
3朗若、直接使用
<vue-particles
? ? ? ? color="#47CD88"
? ? ? ? :particleOpacity="0.7"
? ? ? ? :particlesNumber="80"
? ? ? ? shapeType="circle"
? ? ? ? :particleSize="4"
? ? ? ? linesColor="#47CD88"
? ? ? ? :linesWidth="1"
? ? ? ? :lineLinked="true"
? ? ? ? :lineOpacity="0.4"
? ? ? ? :linesDistance="150"
? ? ? ? :moveSpeed="3"
? ? ? ? :hoverEffect="true"
? ? ? ? hoverMode="grab"
? ? ? ? :clickEffect="true"
? ? ? ? clickMode="push"
? ? ? >
</vue-particles>
4、屬性
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。單個(gè)粒子大小啄栓。
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)動(dòng)速度蜘醋。
hoverEffect: 布爾類型胁塞。默認(rèn)true。是否有hover特效。
hoverMode:String類型啸罢。默認(rèn)true编检。可用的hover模式有:"連線grab","擴(kuò)散效果repulse","放大效果bubble"伺糠。
clickEffect: 布爾類型。默認(rèn)true斥季。是否有click特效训桶。
clickMode:String類型。默認(rèn)true酣倾《娼遥可用的click模式有:"push","remove","repulse","bubble"
