本文介紹了vue 粒子特效的示例代碼，分享給大家，具體如下：

實現(xiàn)效果：

沒錯，你看到的上圖那些類似于星座圖的點和線，是由vue-particles生成的，而且能與用戶鼠標事件產(chǎn)生互動。

傳送門：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> 
  <div id="app">
   <vue-particles color="#dedede"></vue-particles>
  </div>
 </template>

App.vue 文件——一個完整的例子：

<template> 
  <div 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>
  </div>
 </template>

屬性：

• color: String類型。默認'#dedede'。粒子顏色。
• particleOpacity: Number類型。默認0.7。粒子透明度。
• particlesNumber: Number類型。默認80。粒子數(shù)量。
• 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?？捎玫膆over模式有: "grab", "repulse", "bubble"。
• clickEffect: 布爾類型。默認true。是否有click特效。
• clickMode: String類型。默認true?？捎玫腸lick模式有: "push", "remove", "repulse", "bubble"。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論