滑动登陆注册同页面

这是一个登陆注册在同一个页面滑动选择的页面

技术：html、css、javascript

简单页面实现（为了方便，已将代码放在同一文件引用）：

1.1、效果图

login
register

1.2、完整代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>登录/注册</title></head><style>/* root根伪类 --为自定义css 属性  方便我们重复使用同一个属性  自定义属性用var() 进行调用 */:root {/* 背景颜色 */--white: #e9e9e9;--gray: #333;--blue: #0367a6;--lightblue: #008997;/* 外边框圆角属性 */--button-radius: 0.7rem;--max-width: 758px;--max-height: 420px;/* 字体样式 */font-size: 16px;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;}body {align-items: center;background-color: var(--white);background: url(https://pic1.zhimg.com/v2-95c83933bb8d33685321a2bd5579edf8_r.jpg?source=1940ef5c);background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: cover;display: grid;height: 100vh;place-items: center;}.from_title {font-weight: 300;margin: 0;margin-bottom: 1.25rem;}.link {color: var(--gray);font-size: 0.9rem;margin: 1.5rem 0;text-decoration: none;}.container {background-color: var(--white);border-radius: var(--button-radius);box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25);height: var(--max-height);max-width: var(--max-width);overflow: hidden;position: relative;width: 100%;}.container_from {height: 100%;position: absolute;top: 0;transition: all 0.6s ease-in-out;}.container--signin {left: 0;width: 50%;z-index: 2;}.container.right-panel-active .container--signin {transform: translateX(100%);}.container--signup {left: 0;opacity: 0;width: 50%;z-index: 1;}.container.right-panel-active .container--signup {animation: show 0.6s;opacity: 1;transform: translateX(100%);z-index: 5;}.container_overlay {height: 100%;left: 50%;overflow: hidden;position: absolute;top: 0;transition: transform 0.6s ease-in-out;width: 50%;z-index: 100;}.container.right-panel-active .container_overlay {transform: translateX(-100%);}.overlay {background-color: var(--lightblue);background: url(https://pic1.zhimg.com/v2-95c83933bb8d33685321a2bd5579edf8_r.jpg?source=1940ef5c);background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: cover;height: 100%;left: -100%;position: relative;transform: translateX(0);transition: transform 0.6s ease-in-out;width: 200%;}.container.right-panel-active .overlay {transform: translateX(50%);}.overlay_panel {align-items: center;display: flex;flex-direction: column;height: 100%;justify-content: center;position: absolute;text-align: center;top: 0;transform: translateX(0);transition: transform 0.6s ease-in-out;width: 50%;}.overlay--left {transform: translateX(-20%);}.container.right-panel-active .overlay--left {transform: translateX(0);}.overlay--right {right: 0;transform: translateX(0);}.container.right-panel-active .overlay--right {transform: translateX(20%);}.btn {background-color: var(--blue);background-image: linear-gradient(90deg,var(--blue) 0%,var(--lightblue),74%);border-radius: 20px;border: 1px solid var(--blue);color: var(--white);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);}.btn:focus {outline: none;}.from {background-color: var(--white);display: flex;align-items: center;justify-content: center;flex-direction: column;padding: 0 3rem;height: 100%;text-align: center;}.input {background-color: #fff;border: none;padding: 0.9rem 0.9rem;margin: 0.5rem 0;width: 100%;}@keyframes show {0%,49.99% {opacity: 0;z-index: 1;}50%,100% {opacity: 1;z-index: 5;}}</style><body><!-- 整体布局 --><div class="container right-panel-active"><!-- 注册框 --><div class="container_from container--signup"><form action="#" class="from" id="from1"><h2 class="from_title">注册账号</h2><input type="text" placeholder="User" class="input" /><input type="email" placeholder="Email" class="input" /><input type="password" placeholder="Password" class="input" /><button class="btn" type="button">点击注册</button></form></div><!-- 登录框 --><div class="container_from container--signin"><form action="#" class="from" id="from2"><h2 class="from_title">欢迎登录</h2><input type="email" placeholder="Email" class="input" /><input type="password" placeholder="Password" class="input" /><a href="#" class="link">忘记密码？</a><button class="btn" type="button">登录</button></form></div><div class="container_overlay"><div class="overlay"><div class="overlay_panel overlay--left"><button type="button" class="btn" id="signin">已有帐号，直接登陆</button></div><div class="overlay_panel overlay--right"><button type="button" class="btn" id="signup">没有账号，点击注册</button></div></div></div></div></body><script>const signinBtn = document.getElementById("signin");const signupBtn = document.getElementById("signup");const firstForm = document.getElementById("from1");const secondForm = document.getElementById("from2");const container = document.querySelector(".container");signinBtn.addEventListener("click", () => {container.classList.remove("right-panel-active");});signupBtn.addEventListener("click", () => {container.classList.add("right-panel-active");});firstForm.addEventListener("submit", (e) => e.preventDefault());secondForm.addEventListener("submit", (e) => e.preventDefault());</script>
</html>
2.1、效果图：

register
login
lufei

2.2、完整代码：
<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/><title>滑动切换的注册登录界面</title></head><style>* {/* 初始化 */margin: 0;padding: 0;}body {/* 100%窗口高度 */height: 100vh;/* 弹性布局 水平+垂直居中 */display: flex;justify-content: center;align-items: center;/* 渐变背景 */background: linear-gradient(200deg, #f3e7e9, #e3eeff);}.container {background-color: #fff;width: 650px;height: 415px;border-radius: 5px;/* 阴影 */box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);/* 相对定位 */position: relative;}.form-box {/* 绝对定位 */position: absolute;top: -10%;left: 5%;background-color: #d3b7d8;width: 320px;height: 500px;border-radius: 5px;box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);display: flex;justify-content: center;align-items: center;z-index: 2;/* 动画过渡 加速后减速 */transition: 0.5s ease-in-out;}.register-box,.login-box {/* 弹性布局 垂直排列 */display: flex;flex-direction: column;align-items: center;width: 100%;}.hidden {display: none;transition: 0.5s;}h1 {text-align: center;margin-bottom: 25px;/* 大写 */text-transform: uppercase;color: #fff;/* 字间距 */letter-spacing: 5px;}input {background-color: transparent;width: 70%;color: #fff;border: none;/* 下边框样式 */border-bottom: 1px solid rgba(255, 255, 255, 0.4);padding: 10px 0;text-indent: 10px;margin: 8px 0;font-size: 14px;letter-spacing: 2px;}input::placeholder {color: #fff;}input:focus {color: #a262ad;outline: none;border-bottom: 1px solid #a262ad80;transition: 0.5s;}input:focus::placeholder {opacity: 0;}.form-box button {width: 70%;margin-top: 35px;background-color: #f6f6f6;outline: none;border-radius: 8px;padding: 13px;color: #a262ad;letter-spacing: 2px;border: none;cursor: pointer;}.form-box button:hover {background-color: #a262ad;color: #f6f6f6;transition: background-color 0.5s ease;}.con-box {width: 50%;/* 弹性布局 垂直排列 居中 */display: flex;flex-direction: column;justify-content: center;align-items: center;/* 绝对定位 居中 */position: absolute;top: 50%;transform: translateY(-50%);}.con-box.left {left: -2%;}.con-box.right {right: -2%;}.con-box h2 {color: #8e9aaf;font-size: 25px;font-weight: bold;letter-spacing: 3px;text-align: center;margin-bottom: 4px;}.con-box p {font-size: 12px;letter-spacing: 2px;color: #8e9aaf;text-align: center;}.con-box span {color: #d3b7d8;}.con-box img {width: 150px;height: 150px;opacity: 0.9;margin: 40px 0;}.con-box button {margin-top: 3%;background-color: #fff;color: #a262ad;border: 1px solid #d3b7d8;padding: 6px 10px;border-radius: 5px;letter-spacing: 1px;outline: none;cursor: pointer;}.con-box button:hover {background-color: #d3b7d8;color: #fff;}</style><body><div class="container"><div class="form-box"><!-- 注册 --><form class="register-box hidden"><h1>register</h1><input type="text" name="username" placeholder="用户名" /><input type="password" name="password" placeholder="密码" /><button>注册</button></form><!-- 登录 --><!-- <div class="login-box"> --><form action="" class="login-box"><h1>login</h1><input type="text" name="username" placeholder="用户名" /><input type="password" name="password" placeholder="密码" /><button>登录</button></form><!-- </div> --></div><div class="con-box left"><img src="th.jpg" alt="" /><p>已有账号</p><button id="login">去登录</button></div><div class="con-box right"><img src="th.jpg" alt="" /><p>没有账号？</p><button id="register">去注册</button></div></div><script>// 要操作到的元素let login = document.getElementById("login");let register = document.getElementById("register");let form_box = document.getElementsByClassName("form-box")[0];let register_box = document.getElementsByClassName("register-box")[0];let login_box = document.getElementsByClassName("login-box")[0];// 去注册按钮点击事件register.addEventListener("click", () => {form_box.style.transform = "translateX(80%)";login_box.classList.add("hidden");register_box.classList.remove("hidden");});// 去登录按钮点击事件login.addEventListener("click", () => {form_box.style.transform = "translateX(0%)";register_box.classList.add("hidden");login_box.classList.remove("hidden");});</script></body>
</html>

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

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

相关文章

virtualbox Ubuntu 网络连接

virtualbox Ubuntu 网络连接

一、网络连接需求1—— 上网&#xff1a; 虚拟机默认的NAT连接方式&#xff0c;几乎不需要怎么配置&#xff0c;即可实现上网。 enp0s17以太网必须要开启&#xff0c;才能上网&#xff1b; 但是主机ping不通虚拟机&#xff0c;貌似可以ping 127.0.0.1; 二、主机和虚拟机相互p…
阅读更多...
语境化语言表示模型-ELMO、BERT、GPT、XLnet

语境化语言表示模型-ELMO、BERT、GPT、XLnet

一.语境化语言表示模型介绍 语境化语言表示模型&#xff08;Contextualized Language Representation Models&#xff09;是一类在自然语言处理领域中取得显著成功的模型&#xff0c;其主要特点是能够根据上下文动态地学习词汇和短语的表示。这些模型利用了上下文信息&#xf…
阅读更多...
DrGraph原理示教 - OpenCV 4 功能 - 形态操作

DrGraph原理示教 - OpenCV 4 功能 - 形态操作

形态类型 从OpenCV图像处理基本知识来看&#xff0c;膨胀腐蚀操作后&#xff0c;还有形态操作&#xff0c;如开运算、闭运算、梯度、礼帽与黑帽&#xff0c;感觉很多&#xff0c;其实&#xff0c;本质上就是批处理操作&#xff0c;如 开运算&#xff1a;先腐蚀&#xff0c;再膨…
阅读更多...
大模型LLM Agent在 Text2SQL 应用上的实践

大模型LLM Agent在 Text2SQL 应用上的实践

1.前言 在上篇文章中「如何通过Prompt优化Text2SQL的效果」介绍了基于Prompt Engineering来优化Text2SQL效果的实践&#xff0c;除此之外我们还可以使用Agent来优化大模型应用的效果。 本文将从以下4个方面探讨通过AI Agent来优化LLM的Text2SQL转换效果。 1 Agent概述2 Lang…
阅读更多...
肯尼斯·里科《C和指针》第6章 指针（3）

肯尼斯·里科《C和指针》第6章 指针（3）

肯尼斯里科《C和指针》第6章 指针&#xff08;1&#xff09;-CSDN博客 肯尼斯里科《C和指针》第6章 指针&#xff08;2&#xff09;-CSDN博客 前置知识&#xff1a;左值右值 为了理解有些操作符存在的限制&#xff0c;必须理解左值(L-value)和右值(R-value)之间的区别。这两个…
阅读更多...
2024年百场进校公益安全培训开启

2024年百场进校公益安全培训开启

自2023年年底&#xff0c;上海风暴救援队积极策划并推动了2024年的“百场进校传安全”培训项目。经过在东方锦绣于2023年12月14日、上钢新村幼儿园于2023年12月28日的先期测试&#xff0c;项目于2024年1月5日在齐河路幼儿园正式启动。随后&#xff0c;于2024年1月11日在浦南幼儿…
阅读更多...
顺序表和链表基础

顺序表和链表基础

定义动态的顺序表 typedef int SLDataType; typedef struct Seqlist {SLDataType* array;size_t size;size_t capacity; }Seqlist; 在顺序表中插入数据 bool ListInsert(Seqlist* l, int i, SLDataType e) {if (i < 1 || i > l->capacity)return false;int j;for (…
阅读更多...
【大数据进阶第三阶段之Hue学习笔记】Hue的安装和使用

【大数据进阶第三阶段之Hue学习笔记】Hue的安装和使用

1、 Hue的安装 1.1 上传解压安装包 Hue的安装支持多种方式&#xff0c;包括rpm包的方式进行安装、tar.gz包的方式进行安装以及cloudera manager的方式来进行安装等&#xff0c;我们这里使用tar.gz包的方式来进行安装 Hue的压缩包的下载地址&#xff1a; http://archive.cloude…
阅读更多...
python绘制热力图-数据处理-VOC数据类别标签分布及数量统计（-代码）

python绘制热力图-数据处理-VOC数据类别标签分布及数量统计（-代码）

Python是一种功能强大的编程语言&#xff0c;它提供了许多库和工具&#xff0c;用于处理和可视化数据。在本文中&#xff0c;我们将介绍使用Python绘制热力图&#xff0c;并对VOC数据集中的类别标签进行分布及数量统计。 首先&#xff0c;我们需要导入所需的库。使用numpy库来…
阅读更多...
查找算法（部分）

查找算法（部分）

顺序查找 顺序查找是最简单的了&#xff0c;属于无序查找算法&#xff0c;它的原理就是从前往后一个一个的找&#xff0c;如果找到了就返回它的位置&#xff0c;否则就返回-1。 如果有多个相同元素的话&#xff0c;返回第一个该元素的位置。 代码&#xff1a; #include<…
阅读更多...
Vue3 中使用 Vuex 和 Pinia 对比之 Vuex的用法

Vue3 中使用 Vuex 和 Pinia 对比之 Vuex的用法

本文基于 Vue3 的 composition API 来展开 Vuex 和 Pinia 的用法比较 Pinia传送门 Vuex传送门 Vuex 状态管理的核心概念 状态- 驱动应用的数据源&#xff1b;视图 - 以声明方式将状态映射到视图&#xff1b;操作 - 响应在视图上的用户输入导致的状态变化 下面是源自Vuex 官…
阅读更多...
进口零部件三维模型扫描替换抄数建模逆向造型设计服务CASAIM

进口零部件三维模型扫描替换抄数建模逆向造型设计服务CASAIM

三维扫描技术在现代制造业中发挥着越来越重要的作用&#xff0c;尤其在零部件建模领域&#xff0c;它能够快速、准确地获取物体的三维数据&#xff0c;为后续的逆向工程和快速原型制造提供了有力支持。 CASAIM三维扫描仪设备通过对零部件进行三维扫描&#xff0c;我们可以获得…
阅读更多...
OpenHarmony4.0适配LVDS屏幕驱动

OpenHarmony4.0适配LVDS屏幕驱动

1.概述 手头有一块RK3568的开发板OK3568-C&#xff0c;但是还没有适配OpenHarmony&#xff0c;用的还是LVDS屏幕&#xff0c;但是官方和网上好像还没有OpenHarmony4.0的LVDS屏幕驱动的通用实现&#xff0c;所以决定尝试了一下适配该开发板&#xff0c;完成LVDS屏幕驱动的适配&…
阅读更多...
OpenAIOps社区线上宣讲会圆满召开，期待您的加入！

OpenAIOps社区线上宣讲会圆满召开，期待您的加入！

2024年1月12日“OpenAIOps社区”线上宣讲会圆满召开&#xff0c;群体智慧协同创新社区的创立为AIOps领域未来发展注入了活力。OpenAIOps社区是一个AIOps开源社区及创新平台&#xff0c;由中国计算机学会(CCF)、清华大学、南开大学、中科院、国防科大、必示科技等单位共同发起&a…
阅读更多...
Qt 三维柱状图 Q3DBar 和 三维条形图中的数据序列 QBar3DSeries

Qt 三维柱状图 Q3DBar 和 三维条形图中的数据序列 QBar3DSeries

(一) 使用 Q3DBars 图形类和 QBar3DSeries 序列类可以绘制三维柱状图 窗口右侧是用 Q3DBars 和 QBar3DSeries 绘制的三维柱状图&#xff0c;这个图只有一个QBar3DSeries序列&#xff0c;数据是按行存储的&#xff0c;可以有多行。水平方向是行坐标轴和列坐标轴&#xff0c;使用…
阅读更多...
Windows安装和使用kafka

Windows安装和使用kafka

一、安装kafka 由于kafka依赖jdk和zookeeper&#xff0c;安装kafka之前需要先安装jdk和zookeeper&#xff0c;也可以使用kafka自带的zookeeper。安装jdk可以参考&#xff1a;Windows和Linux安装jdk&#xff0c;此处使用kafka自带的zookeeper&#xff0c;不单独安装。 下面在Wi…
阅读更多...
VUE2/3:element ui table表格的显隐列（若依框架）

VUE2/3:element ui table表格的显隐列（若依框架）

若依框架自带一个组件&#xff0c;封装了关于表格&#xff0c;展示和隐藏表格列的功能&#xff1b; 使用效果就是这样的&#xff0c;在表格上面&#xff0c;三个框&#xff0c;从左到右分别是隐藏上面搜索&#xff0c;刷新列表&#xff0c;和显隐列的功能&#xff1b; 一、下面…
阅读更多...
每日一题 82. 删除排序链表中的重复元素 II（中等，链表）

每日一题 82. 删除排序链表中的重复元素 II（中等，链表）

和昨天差不多&#xff0c;今天的是把所有重复数字的节点都删除&#xff08;昨天留了一个&#xff09; 显然当我们发现重复数字时&#xff0c;需要重复的第一个数字的前一个节点才能把重复数字删完&#xff0c;所有在while循环中我们每次判断 t.next 和 t.next.next 的值是否重复…
阅读更多...
互联网今年都崩盘了gis开发还有前途嘛？

互联网今年都崩盘了gis开发还有前途嘛？

互联网和GIS其实分不开的&#xff0c;尤其是在新兴技术领域。 互联网行业都已经在进军测绘、GIS以及智慧城市、无人驾驶等行业&#xff0c;随着高新技术的发展&#xff0c;互联网和GIS其实结合会越来越紧密。 传统互联网行业已经不能满足大众需求&#xff0c;近十年&#xff…
阅读更多...
如何应对Android面试官-＞我用RecyclerView实现了吸顶效果

如何应对Android面试官-＞我用RecyclerView实现了吸顶效果

前言 RecyclerView 计划用两个章节来讲解&#xff0c;今天主要是以 itemDecoration 和 实现吸顶效果为主&#xff1b; ItemDecoration ItemDecoration 允许应用给具体的 View 添加具体的图画或者 Layout 的偏移&#xff0c;对于绘制 View 之间的分割线&#xff0c;视觉分组边…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023