小程序酷炫动态登录页源码（动态水滴）

1. 页面效果

登陆页面一般都要酷炫好看一点，这里分享一个动态登录页面，页面有三个流动的小水滴。一个水滴放登录框。剩下两个水滴跳转页面和打开弹窗。

2. 代码内容

<template><view class="login-page"><u-gap height="80" ></u-gap><div class="container"><div class="drop"><div class="content"><h2 style="font-weight: bolder">XXXX平台</h2><form><div class="inputBox"><input type="text" v-model="loginForm.username" placeholder="请输入平台手机号"></div><div class="inputBox" style="margin-top: 20rpx"><input type="password" v-model="loginForm.password" placeholder="请输入平台密码"></div><div class="inputBox" style="margin-top: 30rpx;width: 80%;margin-left: 10%;text-align: center;" @click="submitLogin"><span class="submit" >登录</span></div></form></div></div></div><a href="#" class="btns" @click="openReg">注册</a><a href="#" class="btns signup" @click="goToWechart">微信登录</a></view>
</template><script>import UGap from "../../uview-ui/components/u-gap/u-gap.vue";export default {components: {UGap},data() {return {loginForm:{username:'',password:''},}},onLoad(option) {uni.hideHomeButton()// if (option.url) {//  this.url = option.url;// }},methods: {submitLogin(){if(this.loginForm.phone==''){this.$interactive.toast('平台手机号不能为空')return;}else if(this.loginForm.password==''){this.$interactive.toast('平台密码号不能为空')return;}},isPhone(phone){const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;if (regMobile.test(phone)) {return true;}else{return false;}},goToWechart(){uni.clearStorageSync()uni.reLaunch({url: '/pages/index/index',});}}}
</script>
<style>
*
{margin: 0;padding: 0;box-sizing: border-box;font-family: 'Poppins', sans-serif;
}
body
{display: flex;justify-content: center;min-height: 100vh;background: #eff0f4;
}
.container
{position: relative;/*left: -80px;*/display: flex;justify-content: center;}
.container .drop
{position: relative;width: 650rpx;height: 650rpx;box-shadow: inset 20px 20px 20px rgba(0,0,0,0.05),25px 35px 20px rgba(0,0,0,0.05),25px 30px 30px rgba(0,0,0,0.05),inset -20px -20px 25px rgba(255,255,255,0.9);transition: 0.5s;display: flex;justify-content: center;align-items: center;border-radius: 52% 48% 33% 67% / 38% 45% 55% 62%;animation: move 8s linear infinite forwards;
}
.container .drop:hover
{border-radius: 50%;
}
.container .drop::before
{content: '';position: absolute;top: 80rpx;left: 119rpx;width: 45rpx;height: 45rpx;border-radius: 50%;background: #fff;opacity: 0.9;
}
.container .drop::after
{content: '';position: absolute;top: 130rpx;left: 160rpx;width: 25rpx;height: 25rpx;border-radius: 50%;background: #fff;opacity: 0.9;
}
.container .drop .content
{position: relative;display: flex;justify-content: center;align-items: center;flex-direction: column;text-align: center;padding: 40px;gap: 15px;
}
.container .drop .content h2
{position: relative;color: #333;font-size: 1.5em;
}
.container .drop .content form
{display: flex;flex-direction: column;gap: 20px;justify-content: center;align-items: center;
}
.container .drop .content form .inputBox
{position: relative;width: 425rpx;box-shadow: inset 2px 5px 10px rgba(0,0,0,0.1),inset -2px -5px 10px rgba(255,255,255,1),15px 15px 10px rgba(0,0,0,0.05),15px 10px 15px rgba(0,0,0,0.025);border-radius: 25px;display: flex;font-weight: bolder;justify-content: center;align-items: center;flex-direction: column;
}
.container .drop .content form .inputBox::before
{content: '';position: absolute;top: 8px;left: 50%;transform: translateX(-50%);width: 65%;height: 5px;background: rgba(255,255,255,0.5);border-radius: 5px;
}
.container .drop .content form .inputBox input
{border: none;outline: none;background: transparent;width: 100%;font-size: 1em;padding: 10px 15px;
}
.container .drop .content form .inputBox .submit
{color: #fff;text-transform: uppercase;cursor: pointer;letter-spacing: 0.1em;font-weight: 500;border: none;outline: none;background: transparent;width: 100%;font-size: 1em;padding: 10px 15px;
}
.container .drop .content form .inputBox:last-child
{width: 300rpx;background: #ff0f5b;box-shadow: inset 2px 5px 10px rgba(0,0,0,0.1),15px 15px 10px rgba(0,0,0,0.05),15px 10px 15px rgba(0,0,0,0.025);transition: 0.5s;
}
.container .drop .content form .inputBox:last-child:hover
{width: 300rpx;
}
.btns
{position: absolute;right: 60rpx;bottom: 0;width: 120px;height: 120px;background: #c61dff;display: flex;justify-content: center;align-items: center;cursor: pointer;text-decoration: none;color: #fff;line-height: 1.2em;letter-spacing: 0.1em;font-size: 0.8em;transition: 0.25s;text-align: center;box-shadow: inset 10px 10px 10px rgba(190,1,254,0.05),15px 25px 10px rgba(190,1,254,0.1),15px 20px 20px rgba(190,1,254,0.1),inset -10px -10px 15px rgba(255,255,255,0.5);border-radius: 44% 56% 65% 35% / 57% 58% 42% 43%;animation: move2 8s linear infinite forwards;/*去掉蓝色色块*/-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.btns::before
{content: '';position: absolute;top: 15px;left: 30px;width: 20px;height: 20px;border-radius: 50%;background: #fff;opacity: 0.45;
}
.btns.signup
{bottom: 280rpx;left: 60rpx;width: 80px;height: 80px;border-radius: 49% 51% 52% 48% / 63% 59% 41% 37%;background: #01b4ff;box-shadow: inset 10px 10px 10px rgba(1,180,255,0.05),15px 25px 10px rgba(1,180,255,0.1),15px 20px 20px rgba(1,180,255,0.1),inset -10px -10px 15px rgba(255,255,255,0.5);animation: move3 8s linear infinite forwards;
}
.btns.signup::before
{left: 20px;width: 15px;height: 15px;
}
.btns:hover
{border-radius: 50%;
}
@keyframes move {30% {border-radius: 30% 57% 36% 64% / 30% 52% 48% 70%;}60% {border-radius: 30% 57% 61% 39% / 30% 52% 48% 70%;}
}@keyframes move2 {30% {border-radius: 36% 64%  30% 60% / 48% 70% 30% 52% ;}60% {border-radius: 61% 39%  30% 60% / 48% 70%  30% 52%;}
}
@keyframes move3 {30% {border-radius: 60%  30% 64%  36% /52% 30% 70% 48% ;}60% {border-radius: 60%  30% 39% 61%  /52% 30% 70% 48% ;}
}
</style>

小程序酷炫动态登录页源码（动态水滴）相关推荐

html制作一个酷炫的记事本（源码）
文章目录 1.记事本风格和灵感 1.1 设计灵感 1.2 整体风格 2.代码展示 1.1 酷炫的记事本效果图 1.2 主代码源码下载 html制作一个酷炫的记事本(源码) 使用html实现记事本的完 ...
校园跑腿微信小程序跑腿同学带直播新版源码
校园跑腿微信小程序跑腿同学带直播新版源码适用类型微信小程序测试环境:系统环境:CentOS Linux 7.6.1810 (Core).运行环境:宝塔 Linux v7.0.3(专业版).网站环 ...
小清新卡通人物404单页源码
介绍: 小清新卡通人物404单页源码网盘下载地址: http://kekewl.net/SVjfAzeAxV2 图片:
微信小程序支付功能-服务器端实现(附源码)
实现了小程序最新的V3版本支付功能, 包括:支付.支付通知.退款.退款通知. 服务器端使用java开发,springboot框架源码链接在评论中微信小程序支付功能-服务器端实现(附源码)_哔哩哔哩 ...
新生报到小程序毕业设计,微信新生报到小程序系统设计与实现,微信小程序毕业设计论文怎么写毕设源码开题报告需求分析怎么做
项目背景和意义目的:本课题主要目标是设计并能够实现一个基于微信小程序新生报到系统,前台用户使用小程序,后台管理使用基PHP+MySql的B/S架构:通过后台添加学校信息.分院信息.班级信息.老师信息 ...
云顶之弈小程序置顶工具（附源码）
简介: 最近在玩云顶之弈总是看手机很不方便第三方的软件不是不靠谱就是数据更新慢就打算用易语言写一个官方助手的置顶工具 https://lol.qq.com/tft/#/index https: ...
毕业设计微信小程序在线免费小说系统（源码+论文）
文章目录 0 项目说明 1 系统介绍 1.1 业务层面 1.2 产品层面 1.3 技术层面 2 项目运行 3 项目截图 3.1 小程序 3.2 后台管理系统 3.3 论文概览 4 项目源码 0 项目说 ...
【毕业设计_课程设计】在线免费小说微信小程序的设计与实现（源码+论文）
文章目录 0 项目说明 1 系统介绍 1.1 业务层面 1.2 产品层面 1.3 技术层面 2 项目运行 3 项目截图 3.1 小程序 3.2 后台管理系统 3.3 论文概览 4 项目源码 0 项目说 ...
springboot基于微信小程序的校园外卖系统毕业设计源码091024
Springboot基于微信小程序的校园外卖系统摘要随着生活质量的日益改善以及生活节奏的日益加快,人们对餐饮需求的质量以及速度也随之发生着变化.为了满足社会需求,餐饮的高质量和快节奏也渐渐使电话订 ...

小程序酷炫动态登录页源码（动态水滴）

1. 页面效果

2. 代码内容

小程序酷炫动态登录页源码（动态水滴）相关推荐

最新文章

热门文章