本文主要跟大家介紹vue 粒子特效的範例程式碼,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧,希望能幫助大家。
實現效果:
沒錯,你看到的上圖那些類似星座圖的點和線,是由vue- particles產生的,而且能與使用者滑鼠事件產生互動。
傳送門:vue-particles
使用教學
npm install vue-particles --save-dev
main.js檔案:
import Vue from 'vue' import VueParticles from 'vue-particles' Vue.use(VueParticles)
App.vue 檔案-一個簡單的例子:
<template> <p id="app"> <vue-particles color="#dedede"></vue-particles> </p> </template>
App.vue 檔案-一個完整的例子:
<template> <p id="app"> <vue-particles color="#dedede" :particleOpacity="0.7" :particlesNumber="80" shapeType="circle" :particleSize="4" linesColor="#dedede" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="3" :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push" > </vue-particles> </p> </template>
屬性:
#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"。
相關推薦:
以上是vue粒子特效實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!