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”。
这里附上登录页完整代码,大家按需索取。
背景铺满屏幕需要设置 宽高100%。
.login-background {background: linear-gradient(-180deg, #dcf2e6 0%, #ffffff 100%); width: 100%; height: 100%; /**宽高100%是为了图片铺满屏幕 */z-index: -1; position: absolute; }.login-other {z-index: 1; margin: 180px 0 0 calc(calc(100vw - 410px) / 2); position: absolute; }.loginContainer {border-radius: 15px; background-clip: padding-box; width: 350px; padding: 15px 35px 15px 35px; background: #fefefe; border: 1px solid #eaeaea; box-shadow: 0 0 25px #cac6c6; }.loginTitle {margin: 15px auto 20px auto; text-align: center; color: #707070; }.loginRemember {text-align: left; margin: 0 0 15px 0; } 人事管理系统
文章图片
记住密码 登录
【vue实现登录页背景粒子特效】以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
推荐阅读
- vue在table表中悬浮显示数据及右键菜单
- 利用nginx部署vue项目的全过程
- Vue实现选项卡tab切换制作
- Vue.js+HighCharts实现动态请求展示时序数据
- Vue.js监听select2的值改变进行查询方式
- Vue|uni-app 微信小程序获取当前定位
- 前端|uniapp开发微信小程序利用腾讯地图实现定位功能
- 微信小程序|微信小程序+mysql实现增删改查
- 计算机网络|【前端vue——系列6】vue连接摄像头并实现摄像头暂停,计时,截图到本地等功能
- vue.js|vue 项目调取本地摄像头可切换摄像头并拍照生成图片