vue实现登录页背景粒子特效

本文实例为大家分享了vue实现登录页背景粒子特效的具体代码,供大家参考,具体内容如下

vue实现登录页背景粒子特效_第1张图片

上图中的点和线,是由Vue-Particles生成的,不仅自己动,还可以与用户的鼠标互动。例子的样式有点丑,大家凑合看一下吧。

1. 使用教程

1.1 安装

npm install vue-particles --save-dev

1.2 引入 main.js 文件

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

1.3 使用

1.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”。

1.5 注意

这里附上登录页完整代码,大家按需索取。
背景铺满屏幕需要设置 宽高100%。





以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的:(vue实现登录页背景粒子特效)