vue-particles插件(粒子特效)的使用

1.安装

npm install vue-particles --save-dev

2.main.js文件加入以下代码

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

3.在页面需要使用的地方直接使用

<vue-particles
      color="#fff"
      :particleOpacity="0.7"
      :particlesNumber="70"
      shapeType="triangle"
      :particleSize="4"
      linesColor="#fff"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="160"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    >
</vue-particles>

4.属性说明

  • 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”)

5.例子效果附图:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值