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

这篇"vue怎么实现登录页背景粒子特效"文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇"vue怎么实现登录页背景粒子特效"文章吧。

效果图如下

上图中的点和线，是由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怎么实现登录页背景粒子特效"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。