HTML+CSS實作酷炫登入切換的專案實踐

 <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; /* 定義交叉軸對齊方式為居中*/
}

 .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 */
}

 .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); / 定義按鈕陰影效果/order-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: 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% */
}