HTML+CSS:炫酷登录切换

效果演示

35-炫酷登录切换.gif

实现了一个登录注册页面的切换效果,当用户点击登录或注册按钮时,会出现一个叠加层,其中包含一个表单,用户可以在表单中输入用户名和密码,然后点击提交按钮进行登录或注册。当用户点击返回按钮时,会将叠加层隐藏,并将登录或注册表单显示在主体区域。这个效果可以提高用户体验,让用户更加方便地登录或注册。

Code

<div class="container"><!-- 注册 --><div class="container-form container-signup"><form action="#" class="form" id="form1"><h2 class="form-title">注册账号</h2><input type="text" placeholder="User" class="input" /><input type="email" placeholder="Email" class="input" /><input type="password" placeholder="Password" class="input" /><button type="button" class="btn">点击注册</button></form></div><!-- 登录 --><div class="container-form container-signin"><form action="#" class="form" id="form2"><h2 class="form-title">欢迎登录</h2><input type="email" placeholder="Email" class="input" /><input type="password" placeholder="Password" class="input" /><a href="#" class="link">忘记密码?</a><button type="button" class="btn">登录</button></form></div><!-- 叠加层部分 --><div class="container-overlay"><div class="overlay"><div class="overlay-panel overlay-left"><button class="btn" id="signIn">已有账号,直接登录</button></div><div class="overlay-panel overlay-right"><button class="btn" id="signUp">没有账号,点击注册</button></div></div></div>
</div>
body {height: 100vh;background: #e7e7e7 url("./img/background.jpg") center no-repeat fixed;background-size: cover;backdrop-filter: blur(5px);display: flex;justify-content: center;align-items: center;
}/* 主体 div 样式 */
.container {background-color: #e7e7e7;border-radius: 0.7rem;box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);height: 420px;max-width: 750px;overflow: hidden;position: relative;width: 100%;
}/* 登录、注册框部分 */
.container-form {height: 100%;position: absolute;top: 0;transition: all 0.6s ease-in-out;
}/* 登录框 - 默认层级高 */
.container-signin {left: 0;width: 50%;z-index: 2;
}/* 注册框 - 默认层级低 - 透明度 0 */
.container-signup {left: 0;opacity: 0;width: 50%;z-index: 1;
}/* 表单样式 */
.form {background-color: #e7e7e7;display: flex;align-items: center;justify-content: center;flex-direction: column;padding: 0 3rem;height: 100%;text-align: center;
}.form-title {font-weight: 300;margin: 0;margin-bottom: 1.25rem;
}.link {color: #333;font-size: 0.9rem;margin: 1.5rem 0;text-decoration: none;
}.input {width: 100%;background-color: #fff;padding: 0.9rem 0.9rem;margin: 0.5rem 0;border: none;outline: none;
}.btn {background-color: #f25d8e;box-shadow: 0 4px 4px rgba(255, 112, 159, .3);border-radius: 5px;color: #e7e7e7;border: none;cursor: pointer;font-size: 0.8rem;font-weight: bold;letter-spacing: 0.1rem;padding: 0.9rem 4rem;text-transform: uppercase;transition: transform 80ms ease-in;
}.form>.btn {margin-top: 1.5rem;
}.btn:active {transform: scale(0.95);
}/* ---------- 叠加部分样式 ------------- */
.container-overlay {height: 100%;left: 50%;overflow: hidden;position: absolute;top: 0;transition: transform 0.6s ease-in-out;width: 50%;z-index: 100;
}.overlay {width: 200%;height: 100%;position: relative;left: -100%;background: url("./img/background.jpg") no-repeat center fixed;background-size: cover;transition: transform 0.6s ease-in-out;transform: translateX(0);
}.overlay-panel {height: 100%;width: 50%;position: absolute;top: 0;display: flex;justify-content: center;align-items: center;flex-direction: column;transform: translateX(0);transition: transform 0.6s ease-in-out;
}.overlay-left {transform: translateX(-20%);
}.overlay-right {right: 0;transform: translateX(0);
}/* 设计激活时叠加层的位置 */
.panel-active .overlay-left {transform: translateX(0);
}.panel-active .container-overlay {transform: translateX(-100%);
}.panel-active .overlay {transform: translateX(50%);
}/* 设置激活时,登录注册层的位置和透明度 */
.panel-active .container-signin {transform: translateX(100%);
}.panel-active .container-signup {opacity: 1;z-index: 5;transform: translateX(100%);
}

实现思路拆分

body {height: 100vh; /* 定义页面高度为视口高度 */background: #e7e7e7 url("./img/background.jpg") center no-repeat fixed; /* 定义页面背景为灰色,并添加背景图片 */background-size: cover; /* 定义背景图片大小为覆盖整个页面 */backdrop-filter: blur(5px); /* 定义背景模糊效果 */display: flex; /* 定义页面为弹性盒子 */justify-content: center; /* 定义主轴对齐方式为居中 */align-items: center; /* 定义交叉轴对齐方式为居中 */
}

这段代码定义了页面的整体样式,包括高度、背景、边框、阴影等。其中,height: 100vh; 表示页面高度为视口高度,background: #e7e7e7 url("./img/background.jpg") center no-repeat fixed; 表示页面背景为灰色,并添加背景图片,background-size: cover; 表示背景图片大小为覆盖整个页面,backdrop-filter: blur(5px); 表示背景模糊效果。

.container-form {height: 100%; /* 定义容器高度为100% */position: absolute; /* 定义容器为绝对定位 */top: 0; /* 定义容器距离顶部为0 */transition: all 0.6s ease-in-out; /* 定义过渡效果 */
}.container-signin {left: 0; /* 定义登录框距离左侧为0 */width: 50%; /* 定义登录框宽度为50% */z-index: 2; /* 定义登录框层级为2 */
}.container-signup {left: 0; /* 定义注册框距离左侧为0 */opacity: 0; /* 定义注册框透明度为0 */width: 50%; /* 定义注册框宽度为50% */z-index: 1; /* 定义注册框层级为1 */
}

这段代码定义了登录、注册框的样式,包括位置、透明度、层级等。其中,height: 100%; 表示容器高度为100%,position: absolute; 表示容器为绝对定位,top: 0; 表示容器距离顶部为0,transition: all 0.6s ease-in-out; 表示过渡效果。

.form {background-color: #e7e7e7; /* 定义表单背景为灰色 */display: flex; /* 定义表单为弹性盒子 */align-items: center; /* 定义交叉轴对齐方式为居中 */justify-content: center; /* 定义主轴对齐方式为居中 */flex-direction: column; /* 定义主轴方向为垂直方向 */padding: 0 3rem; /* 定义表单内边距为左右各3rem */height: 100%; /* 定义表单高度为100% */text-align: center; /* 定义表单文本对齐方式为居中 */
}.form-title {font-weight: 300; /* 定义标题字体粗细为300 */margin: 0; /* 定义标题外边距为0 */margin-bottom: 1.25rem; /* 定义标题下边距为1.25rem */ }.link { color: #333; /* 定义链接颜色为黑色 / font-size: 0.9rem; / 定义链接字体大小为0.9rem / margin: 1.5rem 0; / 定义链接外边距为上下各1.5rem,左右各0 / text-decoration: none; / 定义链接去除下划线 */ }.input { width: 100%; /* 定义输入框宽度为100% / background-color: #fff; / 定义输入框背景为白色 / padding: 0.9rem 0.9rem; / 定义输入框内边距为上下各0.9rem,左右各0.9rem / margin: 0.5rem 0; / 定义输入框外边距为上下各0.5rem,左右各0 / border: none; / 定义输入框无边框 / outline: none; / 定义输入框无轮廓线 */ }.btn { background-color: #f25d8e; /* 定义按钮背景为粉红色 / box-shadow: 0 4px 4px rgba(255, 112, 159,.3); / 定义按钮阴影效果 / border-radius: 5px; / 定义按钮圆角半径为5px / color: #e7e7e7; / 定义按钮文本颜色为白色 / border: none; / 定义按钮无边框 / cursor: pointer; / 定义按钮为指针类型 / font-size: 0.8rem; / 定义按钮字体大小为0.8rem / font-weight: bold; / 定义按钮字体粗细为bold / letter-spacing: 0.1rem; / 定义按钮字母间距为0.1rem / padding: 0.9rem 4rem; / 定义按钮内边距为上下各0.9rem,左右各4rem / text-transform: uppercase; / 定义按钮文本为大写字母 / transition: transform 80ms ease-in; / 定义按钮过渡效果 */ }.form>.btn { margin-top: 1.5rem; /* 定义按钮上边距为1.5rem */ }.btn:active { transform: scale(0.95); /* 定义按钮激活时缩放效果 */}

这段代码定义了登录和注册表单的样式,包括背景、字体、输入框、按钮等。其中,background-color: #e7e7e7; 表示表单背景为灰色,display: flex; 表示表单为弹性盒子,align-items: center; 表示交叉轴对齐方式为居中,justify-content: center; 表示主轴对齐方式为居中,flex-direction: column; 表示主轴方向为垂直方向,padding: 0 3rem; 表示表单内边距为左右各3rem,height: 100%; 表示表单高度为100%,text-align: center; 表示表单文本对齐方式为居中。

.container-overlay {height: 100%;/* 定义容器高度为100% / left: 50%; / 定义容器距离左侧为50% / overflow: hidden; / 定义容器溢出部分隐藏 / position: absolute; / 定义容器为绝对定位 / top: 0; / 定义容器距离顶部为0 / transition: transform 0.6s ease-in-out; / 定义过渡效果 / width: 50%; / 定义容器宽度为50% / z-index: 100; / 定义容器层级为100 */
}.overlay {width: 200%;/* 定义叠加层宽度为200% / height: 100%; / 定义叠加层高度为100% / position: relative; / 定义叠加层为相对定位 / left: -100%; / 定义叠加层距离左侧为-100% / background: url("./img/background.jpg") no-repeat center fixed; / 定义叠加层背景为背景图片,并居中对齐 / background-size: cover; / 定义叠加层背景大小为覆盖整个页面 / transition: transform 0.6s ease-in-out; / 定义过渡效果 / transform: translateX(0); / 定义叠加层初始位置为0 */
}.overlay-panel {height: 100%;/* 定义叠加层面板高度为100% / width: 50%; / 定义叠加层面板宽度为50% / position: absolute; / 定义叠加层面板为绝对定位 / top: 0; / 定义叠加层面板距离顶部为0 / display: flex; / 定义叠加层面板为弹性盒子 / justify-content: center; / 定义主轴对齐方式为居中 / align-items: center; / 定义交叉轴对齐方式为居中 / flex-direction: column; / 定义主轴方向为垂直方向 / transform: translateX(0); / 定义叠加层面板初始位置为0 / transition: transform 0.6s ease-in-out; / 定义过渡效果 */
}.overlay-left {transform: translateX(-20%);/* 定义左侧叠加层面板位置为向左移动20% */
}.overlay-right {right: 0;/* 定义右侧叠加层面板距离右侧为0 / transform: translateX(0); / 定义右侧叠加层面板位置为0 */
}/* 设计激活时叠加层的位置 / .panel-active.overlay-left { transform: translateX(0); / 定义左侧叠加层面板位置为0 */
}.panel-active.container-overlay {transform: translateX(-100%);/* 定义容器距离左侧为-100% */
}.panel-active.overlay {transform: translateX(50%);/* 定义叠加层位置为向右移动50% */
}/* 设置激活时,登录注册层的位置和透明度 / .panel-active.container-signin { transform: translateX(100%); / 定义登录层位置为向右移动100% */
}.panel-active.container-signup {opacity: 1;/* 定义注册层透明度为1 / z-index: 5; / 定义注册层层级为5 / transform: translateX(100%); / 定义注册层位置为向右移动100% */
}

这段代码定义了登录和注册页面的叠加层的样式,包括位置、大小、透明度、层级等。其中,height: 100%; 表示容器高度为100%,left: 50%; 表示容器距离左侧为50%,overflow: hidden; 表示容器溢出部分隐藏,position: absolute; 表示容器为绝对定位,top: 0; 表示容器距离顶部为0,transition: transform 0.6s ease-in-out; 表示过渡效果,width: 50%; 表示容器宽度为50%,z-index: 100; 表示容器层级为100。
居中对齐,background-size: cover; 表示叠加层背景大小为覆盖整个页面,transition: transform 0.6s ease-in-out; 表示过渡效果,transform: translateX(0); 表示叠加层初始位置为0。
叠加层面板的样式包括叠加层面板的高度、宽度、位置、显示方式、对齐方式、主轴方向、过渡效果、初始位置等。其中,height: 100%; 表示叠加层面板高度为100%,width: 50%; 表示叠加层面板宽度为50%,position: absolute; 表示叠加层面板为绝对定位,top: 0; 表示叠加层面板距离顶部为0,display: flex; 表示叠加层面板为弹性盒子,justify-content: center; 表示主轴对齐方式为居中,align-items: center; 表示交叉轴对齐方式为居中,flex-direction: column; 表示主轴方向为垂直方向,transform: translateX(0); 表示叠加层面板初始位置为0,transition: transform 0.6s ease-in-out; 表示过渡效果。
叠加层面板的左侧和右侧样式分别定义为 overlay-left 和 overlay-right,分别表示左侧和右侧叠加层面板的样式。其中,transform: translateX(-20%); 表示左侧叠加层面板位置为向左移动20%,right: 0; 表示右侧叠加层面板距离右侧为0,transform: translateX(0); 表示右侧叠加层面板位置为0。
当激活时,叠加层的位置和透明度会发生变化,包括左侧叠加层面板位置、容器距离左侧、叠加层位置、注册层透明度、注册层位置等。其中,.panel-active.overlay-left 表示当激活时,左侧叠加层面板位置为0,.panel-active.container-overlay 表示当激活时,容器距离左侧为-100%,.panel-active.overlay 表示当激活时,叠加层位置为向右移动50%,.panel-active.container-signin 表示当激活时,登录层位置为向右移动100%,.panel-active.container-signup 表示当激活时,注册层透明度为1,注册层层级为5,注册层位置为向右移动100%。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/645313.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

操作系统----操作系统的特征

目录 1.并发&#xff1a; 2.共享&#xff1a; 3.虚拟&#xff1a; 4.异步&#xff1a; 操作系统包括以下4个特征&#xff1a;并发&#xff0c;共享&#xff0c;虚拟&#xff0c;异步 1.并发&#xff1a; 指两个或多个事件在同一时间间隔内发生。这些事件宏观上是同时发生…

边缘计算:挑战与机遇的平衡艺术

前言 边缘计算作为云计算的补充&#xff0c;通过在数据源近处进行数据处理&#xff0c;已经成为实现物联网&#xff08;IoT&#xff09;、自动驾驶、智慧城市等应用的重要技术。然而&#xff0c;边缘计算的发展和普及也面临不少挑战&#xff0c;同时也带来了巨大的机遇。 方向…

【Android】Android中的系统镜像由什么组成?

文章目录 总览Boot Loader 的加锁与解锁Boot 镜像内核RAM diskARM 中的设备树 (Device Tree) /System 和/Data 分区镜像参考 总览 各种Android设备都只能刷专门为相应型号的设备定制的镜像。 厂商会提供一套系统镜像把它作为“出厂默认”的 Android 系统刷在设备上。 一个完…

SpringCloudAlibaba系列之Nacos实战

目录 注意事项 参考资源 Nacos配置中心 初始化项目 进行Nacos相关配置 运行 Nacos注册中心 dubbo方式 对外暴露接口dubbo-api 服务提供者dubbo-provider 服务消费者dubbo-consumer 负载均衡客户端方法 服务提供者 服务消费者 注意事项 不管是使用Nacos配置中心&…

代码随想录 Leetcode144/94/145 二叉树的前/中/后序遍历

题目&#xff1a; 前&#xff1a; 中&#xff1a; 后&#xff1a; 代码&#xff08;首刷自解 2024年1月24日&#xff09;&#xff1a; //前序遍历&#xff0c;递归 class Solution { public:void funcOfRecursion(TreeNode* cur, vector<int>& vec) {if (cur null…

MySQL深入——16

MySQL如何保持高可用&#xff1f;&#xff1f; 主备延迟 主备延迟分为两类&#xff0c;一类主动比如软件升级&#xff0c;主库所在机器按照计划下线等&#xff0c;另外一类是被动&#xff0c;比如主库所在机器掉电。 在看这个概念之前&#xff0c;我们先来看看“同步延迟”&…

谈谈 RocketMQ 5.0 分级存储背后一些有挑战的技术优化

作者&#xff1a;斜阳 RocketMQ 5.0 提出了分级存储的新方案&#xff0c;经过数个版本的深度打磨&#xff0c;RocketMQ 的分级存储日渐成熟&#xff0c;并成为降低存储成本的重要特性之一。事实上&#xff0c;几乎所有涉及到存储的产品都会尝试转冷降本&#xff0c;如何针对消…

张量计算和操作

一、数据操作 1、基础 import torchx torch.arange(12) # x:tensor([ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11])x.shape # torch.Size([12])x.numel() # 12x x.reshape(3, 4) # tensor([[ 0, 1, 2, 3], # [ 4, 5, 6, 7], # [ 8, 9, 10, 11]])torch.zeros((2…

自动化Web页面性能测试介绍

随着越来越多的用户使用移动设备访问 Web 应用&#xff0c;使得 Web 应用需要支持一些性能并不是很好的移动设备。为了度量和测试 Web 应用是不是在高复杂度的情况下&#xff0c;页面性能能满足用户的需求。 同时&#xff0c;随着 Web 应用的空前发展&#xff0c;前端业务逐渐…

插入排序

插入排序 概述步骤代码示例输出结果 概述 插入排序是一种最简单直观的排序算法&#xff0c;它的工作原理是通过创建有序序列和无序序列&#xff0c;然后再遍历无序序列得到里面每一个数字&#xff0c;把每一个数字插入到有序序列中正确的位置。 插入排序是一种简单直观的排序…

某马头条——day10

热文章数据查询 分布式任务调度xxl-job 概述 环境搭建 docker化部署 docker run -p 3306:3306 --name mysql57 \ -v /opt/mysql/conf:/etc/mysql \ -v /opt/mysql/logs:/var/log/mysql \ -v /opt/mysql/data:/var/lib/mysql \ -e MYSQL_ROOT_PASSWORDroot\ -d mysql:5.7 dock…

尝试给docker ubuntu22.04镜像添加远程访问桌面

实在时不愿折腾&#xff0c;但是ubuntu 镜像没有桌面&#xff0c;有些操作实在太难受了&#xff0c;效率也不高。硬着头皮上吧。幸亏这是个docker的镜像。要是个虚拟机&#xff0c;这折腾来去&#xff0c;直接崩溃了。docker的好处就是立马就能从头来过&#xff0c;秒级的删除安…

分辨率 时钟频率 lane速率计算

PCLK: pixel clock(像素频率) 计算方法如下&#xff1a; 以1920x1080p/60hz为例&#xff0c;total pixel&#xff1a;2200&#xff0c;total line&#xff1a;1125&#xff0c;filed rate&#xff1a;60Hz&#xff0c;那么&#xff1a;PCLK 2200*1125*60 148.5MHz&#xff1b…

ATF(TF-A)安全通告TF-V11——恶意的SDEI SMC可能导致越界内存读取(CVE-2023-49100)

目录 一、ATF(TF-A)安全通告TFV-11 (CVE-2023-49100) 二、透过事务看本质SDEI是干啥的呢&#xff1f; 三、CVE-2023-49100 1、GICv2 systems 2、GICv3 systems 四、漏洞修复 一、ATF(TF-A)安全通告TFV-11 (CVE-2023-49100) Title 恶意的SDEI SMC可能导致越界内存读取&am…

Spring Security架构

文章目录 过滤器回顾DelegatingFilterProxyFilterChainProxySecurityFilterChainSecurity Filters打印Security Filters将自定义过滤器添加到过滤器链 Handling Security ExceptionsSaving Requests Between AuthenticationRequestCachePrevent the Request From Being Saved R…

Mysql的备份以及恢复

第五章 MySQL的备份及恢复 5.1 MySQL日志管理 在数据库保存数据时&#xff0c;有时候不可避免会出现数据丢失或者被破坏&#xff0c;这样情况下&#xff0c;我们必须保证数据的安全性和完整性&#xff0c;就需要使用日志来查看或者恢复数据了 数据库中数据丢失或被破坏可能原…

Spring SpEL在Flink中的应用-与Filter结合实现数据动态分流

文章目录 前言一、POM依赖二、主函数代码示例三、FilterFunction实现总结 前言 SpEL表达式与Flink fiter结合可以实现基于表达式的灵活动态过滤。有关SpEL表达式的使用请参考Spring SpEL在Flink中的应用-SpEL详解。 可以将过滤规则放入数据库&#xff0c;根据不同的数据设置不…

【c++学习】数据结构中的顺序表

c顺序表 数据结构中的顺序表代码 数据结构中的顺序表 顺序表强调数据的存储结构&#xff0c;表示数据在内存中连续存储。&#xff08;线性表与链表相对&#xff0c;链表数据在内存中的存储空间是不连续的&#xff09; 代码 下述代码实现了线性表及其接口 包括增、删、查、改…

《游戏-01_3D-开发》之—人物动画控制器

创建变量&#xff0c; 创建线&#xff0c; 连接&#xff0c; 选中线会变为蓝色&#xff0c;新增变量&#xff0c; 设置线&#xff0c; 双击子层进入子层&#xff0c; 创建变量&#xff0c; 双击SkillPanel 拖拽好之后返回上一层&#xff0c; 依次连接&#xff0c; 设置线&#…

解释LoRA参数

目录 LoRA参数含义 LoRA在深度学习中的作用 示例代码中的LoRA应用 结论 LoRA参数含义 LoRA (lora_r): LoRA代表"Low-Rank Adaptation"&#xff0c;是一种模型参数化技术&#xff0c;用于在不显著增加参数数量的情况下调整预训练模型。lora_r参数指的是LoRA中的秩&…