image.png
圖上那些類似于星座圖的點和線,是由vue-particles生成的,不僅自己動,而且能與用戶鼠標(biāo)事件產(chǎn)生互動。
一直中意這種動態(tài)插件,今天有時間,迫不及待試了一波~
大寫的NICE~
使用教程:
npm install vue-particles --save-dev
main.js里加入以下代碼:
import VueParticles from 'vue-particles'
Vue.use(VueParticles)
App.vue 文件——一個完整的例子:
<template>
<div id="app">
<vue-particles
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"
>
</vue-particles>
<router-view></router-view>
</div>
</template>
/*如果想做背景圖片 可以給標(biāo)簽一個class 直接添加背景圖*/
屬性:
-
color: String類型。
默認(rèn)'#dedede'。粒子顏色。 -
particleOpacity: Number類型。
默認(rèn)0.7。粒子透明度。 -
particlesNumber: Number類型。
默認(rèn)80。粒子數(shù)量。 -
shapeType: String類型。
默認(rèn)'circle'??捎玫牧W油庥^類型有:"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。粒子運動速度。 -
hoverEffect: 布爾類型。
默認(rèn)true。是否有hover特效。 -
hoverMode: String類型。
默認(rèn)true??捎玫膆over模式有: "grab", "repulse", "bubble"。 -
clickEffect: 布爾類型。
默認(rèn)true。是否有click特效。 -
clickMode: String類型。
默認(rèn)true??捎玫腸lick模式有: "push", "remove", "repulse", "bubble"。
f31672037f1ab97c608393d5575e1.jpg
github下載:vue-particles
文章參考:http://www.8dou5che.com/2017/05/17/vue-particles/