HTML+CSS:炫酷登录切换

news2024/12/24 21:57:19

效果演示

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.coloradmin.cn/o/1408991.html

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

相关文章

第三篇【传奇开心果短博文系列】Python的OpenCV库技术点案例示例:物体检测与识别

传奇开心果短博文系列 系列短博文目录Python的OpenCV库技术点案例示例短博文系列 短博文目录一、项目目标二、OpenCV物体检测与识别介绍三、分别示例代码四、扩展示例代码 系列短博文目录 Python的OpenCV库技术点案例示例短博文系列 短博文目录 一、项目目标 物体检测与识别…

Pycharm终端显示PS而不显示虚拟环境venv

PS表示当前使用的是powershell.exe&#xff0c;如果你要显示虚拟环境名&#xff0c;则要改为cmd.exe 解决办法&#xff1a; 打开File-settings-Tools-Terminal-shell path 在文件中找到设置&#xff0c;在工具中找到终端 把第四个Shell路径设置为cmd.exe 3. 点击确定&#xf…

腾合力携思腾云全系列产品亮相2023算云融合产业大会

由中国信息通信研究院、中国通信标准化协会联合主办的首届算云融合产业大会于2023年3月29-30日在北京国际会议中心举办。大会围绕“云融万物 算启未来”主题&#xff0c;设置“主论坛六大分论坛”&#xff0c;覆盖产业热点领域及方向&#xff0c;全面推动我国算力云服务发展。集…

自定义错误页面在Spring Boot中的实现

引言 在SpringBoot中&#xff0c;常用的异常处理有两种&#xff1a;一种是 BasicErrorController&#xff0c;另一种是 ControllerAdvice。BasicErrorController 用于处理非Controller抛出的异常&#xff0c;而ControllerAdvice 用于处理Controller抛出的异常&#xff0c;对于…

windows vs2005编译libssh2支持sftp

windows vs2005编译libssh2支持sftp 1、编译模块 ​ 需要用到4个库&#xff1a;libcurl、libssh2、openssl、zlib 为啥要用libssh2 因为libcurl实现sftp功能依赖libssh2&#xff0c;是对libssh2的封装。 所以也可以直接用libssh2实现sftp。 为啥要用openssl 因为libssh2依…

【linux】查看进程和子进程

在Linux系统中&#xff0c;可以使用多个命令来查看进程及其子进程。以下是一些常用的方法&#xff1a; 1. ps 命令 ps 命令用于显示当前进程的状态。可以结合不同的选项来查看进程及其子进程。 查看进程树&#xff1a; ps -auxf - -a 显示所有进程。 - -u 显示进程的用户/所…

AI伦理边界:探索人工智能伦理计算

大家好&#xff0c;近年学界与工业界都已开始关注并热议 AI 伦理治理问题&#xff0c;也在伦理规范研究上取得了初步进展。然而&#xff0c;由于 AI 伦理的抽象性&#xff0c;如何定量化度量智能系统的伦理&#xff0c;还是一个未知的难题。 李学龙教授团队在《中国科学&#…

【学网攻】 第(5)节 -- Cisco VTP的使用

文章目录 【学网攻】 第(1)节 -- 认识网络【学网攻】 第(2)节 -- 交换机认识及使用【学网攻】 第(3)节 -- 交换机配置聚合端口【学网攻】 第(4)节 -- 交换机划分Vlan 前言 网络已经成为了我们生活中不可或缺的一部分&#xff0c;它连接了世界各地的人们&#xff0c;让信息和资…

apple watch开通esim(一号双终端)报错解决方法

写在前面&#xff1a; 本文不一定可以解决您问题&#xff0c;本文记录了作者在遇到该情况时的处理办法&#xff0c;导致这个问题的原因会有很多&#xff0c;本文仅记录部分&#xff0c;仅供读者参考。与客服人员沟通时&#xff0c;请避免说esim&#xff0c;大多数客服人员不一定…

windbg :查看局部变量值

查看变量有以下几种常用方式&#xff1a; 仍以我们上篇 &#xff1a; 《windbg : x 命令》中的代码作为示例来讲解使用。 源码&#xff1a; #include <iostream>using namespace std;struct JKGirl{std::string name;int age;friend ostream& operator <<(o…

【机器学习300问】17、什么是欠拟合和过拟合?怎么解决欠拟合与过拟合?

一个问题出现了&#xff0c;我们首先要描述这个问题&#xff0c;然后分析问题出现的原因&#xff0c;找到原因后提出解决方案。废话不多说&#xff0c;直接上定义&#xff0c;然后通过回归和分类任务的例子来做解释。 一、什么是欠拟合和过拟合&#xff1f; &#xff08;1&am…

面试题:String s = new String(“xyz“) 创建了几个对象?

项目场景&#xff1a; 今天分享一篇基础技术面试题。 这个问题相信每个学习 java 的同学都不陌生&#xff0c;作为一个经典的面试题&#xff0c;到现在工作这么多年了我真是认为挺操蛋的一个问题&#xff0c;在网上到现在你仍然可以看见很多讨论这个问题的人&#xff0c;其中不…

酷开科技 | 酷开系统体育频道燃爆体育赛事,为偶像疯狂打CALL

体育竞技&#xff0c;总会带给我们激情澎湃的感受&#xff0c;兴奋、激动、热血&#xff0c;这些瞬间也许就是竞技体育的魅力&#xff01;酷开科技通过酷开系统的体育频道&#xff0c;为广大体育迷们提供了一个观赛平台。在这个平台上&#xff0c;你可以欣赏到各类体育赛事的精…

用JavaFX写了一个简易的管理系统

文章目录 前言正文一、最终效果1.1 主页面1.2 动物管理页面-初始化1.3 动物管理页面-修改&新增1.4 动物管理页面-删除&批量删除 二、核心代码展示2.1 启动类2.2 数据库配置-db.setting2.3 日志文本域组件2.4 自定义表格视图组件2.5 自定义分页组件2.6 动物管理页面2.7 …

JVM/GC复习1---更新中

JVM/GC JVMGC垃圾回收算法1.引用计数法2.标记清除发3.标记压缩算法4.复制算法5.分代算法 收集器1.串行垃圾收集器2.并行垃圾收集器2.CMS垃圾收集器 3.G1垃圾收集器(重点)jdk1.7开始1.9默认的回收器Young GC模式Mixed GCFull GC JVM 待更新中ing GC 垃圾回收:程序运行的时候必…

2024年美赛数学建模思路 - 案例:异常检测

文章目录 赛题思路一、简介 -- 关于异常检测异常检测监督学习 二、异常检测算法2. 箱线图分析3. 基于距离/密度4. 基于划分思想 建模资料 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 一、简介 – 关于异常…

【JSON2WEB】03 go的模板包html/template的使用

Go text/template 是 Go 语言标准库中的一个模板引擎&#xff0c;用于生成文本输出。它使用类似于 HTML 的模板语言&#xff0c;可以将数据和模板结合起来&#xff0c;生成最终的文本输出。 Go html/template包实现了数据驱动的模板&#xff0c;用于生成可防止代码注入的安全的…

一文掌握Shell

文章目录 Shell概述脚本的常用执行方式Linux中的sh解释器Linux中的/etc 编写sh脚本第一个sh脚本变量1. 系统预定义变量2. 自定义变量3. 变量定义规则单引号和双引号的区别 4. 特殊变量 运算符命令替换条件判断常用判断语句 流程控制if语句case语句while循环 read读取控制台输入…

生产、计划、仓库、质量,一大堆的工厂数据要怎么收集?MES系统替你解决!

随着制造业的发展和进步&#xff0c;工厂运营面临着越来越多的挑战&#xff0c;特别是在数据管理和生产过程控制方面。生产、计划、仓库、质量等方面的数据分散在各个系统和部门中&#xff0c;数据的收集和分析变得复杂而困难。然而&#xff0c;MES系统为工厂提供了一个综合性解…

成功安装DCNv4

最终结果 终于安装成功了。 环境 系统&#xff1a;ubuntu22.04 CUDA&#xff1a;12.1 python&#xff1a;3.11 显卡驱动&#xff1a;545 安装过程 系统、CUDA和python的安装过程忽略&#xff0c;这些都能找到。这里只写不同的地方。 配置CUDAHOME 执行命令“ gedit ~/…