Vue Particles | 一款基于vuejs的炫酷粒子背景动画特效组件

Vue Particles是一款基于vuejs的炫酷粒子背景动画特效组件。通过该组件，您可以快速的在网页上生成炫酷的背景粒子动画效果。

使用方法

安装

如果您想使用Vue Particles粒子背景动画特效组件，首先您需要安装它，命令如下：

npm install vue-particles --save

		

使用

在mian.js文件中引入组件：

import Vue from 'vue'
import VueParticles from 'vue-particles'
Vue.use(VueParticles)
		

一个最简单的例子如下：

<template>
  <div id="app">
    <vue-particles color="#dedede"></vue-particles>
  </div>
</template>
		

一个带完整配置参数的例子如下：

<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"
  class="particles-js"
/>
		

配置参数

Vue Particles粒子背景动画特效组件的可用配置参数如下：

• 颜色（color）：用于设定颜色的属性。默认值为：#dedede
• 粒子透明度（particleOpacity）：用于设定粒子透明度的属性。默认值为：0.7
• 粒子数量（particlesNumber）：用于设定粒子数量的属性。默认值为：80
• 形状类型（shapeType）：用于设定粒子形状的属性。可选的形状类型有圆形、边缘、三角形、多边形和星形("circle","edge","triangle", "polygon","star")。默认值为："circle"
• 粒子大小（particleSize）：用于设定单个粒子大小的属性。默认值为：4
• 线条颜色（linesColor）：用于设定线条颜色的属性。默认值为：#dedede
• 线条宽度（linesWidth）：用于设定线条宽度的属性。默认值为：1
• 连接线（lineLinked）：用于设定是否启用连接线的属性。默认值为：true
• 线条透明度（lineOpacity）：用于设定线条透明度的属性。默认值为：0.4
• 线条距离（linesDistance）：用于设定连接线距离的属性。默认值为：150
• 移动速度（moveSpeed）：用于设定粒子移动速度的属性。默认值为：3
• 悬停效果（hoverEffect）：用于设定是否启用悬停效果的属性。默认值为：true
• 悬停模式（hoverMode）：用于设定悬停模式的属性。可选的悬停模式有："grab", "repulse", "bubble"。默认值为："grab"
• 点击效果（clickEffect）：用于设定是否启用点击效果的属性。默认值为：true
• 点击模式（clickMode）：用于设定点击模式的属性。可选的点击模式有："push", "remove", "repulse", "bubble"。默认值为："push"

github网址：https://github.com/creotip/vue-particles