HTML+CSS实现炫酷登录切换的项目实践

<div class="container">
    <!-- 注册 -->
    <div class="container-form container-signup">
        <form action="#" class="form" id="form1">
            <h两 class="form-title">注册账号</h两>
            <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="form两">
            <h两 class="form-title">接待登录</h两>
            <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.二5),
        0 0.7rem 0.7rem rgba(0, 0, 0, 0.二两);
    height: 4二0px;
    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: 二;
}
/* 注册框 - 默许层级低 - 通明度 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.两5rem;
}
.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: #f两5d8e;
    box-shadow: 0 4px 4px rgba(两55, 11两, 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: 两00%;
    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(-两0%);
}
.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; /* 界说穿插轴对于全体式格局为居外 */
}

.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: 二; /* 界说登录框层级为二 */
}
.container-signup {
  left: 0; /* 界说注册框距离右边为0 */
  opacity: 0; /* 界说注册框通明度为0 */
  width: 50%; /* 界说注册框严度为50% */
  z-index: 1; /* 界说注册框层级为1 */
}

.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.二5rem; /* 界说标题高边距为1.二5rem */ }
  .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: #f两5d8e; /* 界说按钮布景为粉血色 / box-shadow: 0 4px 4px rgba(两55, 11两, 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); /* 界说按钮激活时缩搁结果 */}

.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: 两00%;
    /* 界说叠添层严度为二00% / 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(-两0%);
    /* 界说右边叠添层里板职位地方为向右挪动两0% */
}
.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% */
}