HTML+CSS實現(xiàn)炫酷登錄切換的項目實踐
我要評論效果演示
實現(xiàn)了一個登錄注冊頁面的切換效果，當用戶點擊登錄或注冊按鈕時，會出現(xiàn)一個疊加層，其中包含一個表單，用戶可以在表單中輸入用戶名和密碼，然后點擊提交按鈕進行登錄或注冊。當用戶點擊返回按鈕時，會將疊加層隱藏，并將登錄或注冊表單顯示在主體區(qū)域。這個效果可以提高用戶體驗，讓用戶更加方便地登錄或注冊。
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);
}
/* 設(shè)計激活時疊加層的位置 */
.panel-active .overlay-left {
transform: translateX(0);
}
.panel-active .container-overlay {
transform: translateX(-100%);
}
.panel-active .overlay {
transform: translateX(50%);
}
/* 設(shè)置激活時，登錄注冊層的位置和透明度 */
.panel-active .container-signin {
transform: translateX(100%);
}
.panel-active .container-signup {
opacity: 1;
z-index: 5;
transform: translateX(100%);
}實現(xiàn)思路拆分
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; /* 定義登錄框距離左側(cè)為0 */
width: 50%; /* 定義登錄框?qū)挾葹?0% */
z-index: 2; /* 定義登錄框?qū)蛹墳? */
}
.container-signup {
left: 0; /* 定義注冊框距離左側(cè)為0 */
opacity: 0; /* 定義注冊框透明度為0 */
width: 50%; /* 定義注冊框?qū)挾葹?0% */
z-index: 1; /* 定義注冊框?qū)蛹墳? */
}這段代碼定義了登錄、注冊框的樣式，包括位置、透明度、層級等。其中，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; /* 定義表單內(nèi)邊距為左右各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%; /* 定義輸入框?qū)挾葹?00% / background-color: #fff; / 定義輸入框背景為白色 / padding: 0.9rem 0.9rem; / 定義輸入框內(nèi)邊距為上下各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; / 定義按鈕內(nèi)邊距為上下各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; 表示表單內(nèi)邊距為左右各3rem，height: 100%; 表示表單高度為100%，text-align: center; 表示表單文本對齊方式為居中。
.container-overlay {
height: 100%;
/* 定義容器高度為100% / left: 50%; / 定義容器距離左側(cè)為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%; / 定義疊加層距離左側(cè)為-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%);
/* 定義左側(cè)疊加層面板位置為向左移動20% */
}
.overlay-right {
right: 0;
/* 定義右側(cè)疊加層面板距離右側(cè)為0 / transform: translateX(0); / 定義右側(cè)疊加層面板位置為0 */
}
/* 設(shè)計激活時疊加層的位置 / .panel-active.overlay-left { transform: translateX(0); / 定義左側(cè)疊加層面板位置為0 */
}
.panel-active.container-overlay {
transform: translateX(-100%);
/* 定義容器距離左側(cè)為-100% */
}
.panel-active.overlay {
transform: translateX(50%);
/* 定義疊加層位置為向右移動50% */
}
/* 設(shè)置激活時，登錄注冊層的位置和透明度 / .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%; 表示容器距離左側(cè)為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; 表示過渡效果。
疊加層面板的左側(cè)和右側(cè)樣式分別定義為 overlay-left 和 overlay-right，分別表示左側(cè)和右側(cè)疊加層面板的樣式。其中，transform: translateX(-20%); 表示左側(cè)疊加層面板位置為向左移動20%，right: 0; 表示右側(cè)疊加層面板距離右側(cè)為0，transform: translateX(0); 表示右側(cè)疊加層面板位置為0。
當激活時，疊加層的位置和透明度會發(fā)生變化，包括左側(cè)疊加層面板位置、容器距離左側(cè)、疊加層位置、注冊層透明度、注冊層位置等。其中，.panel-active.overlay-left 表示當激活時，左側(cè)疊加層面板位置為0，.panel-active.container-overlay 表示當激活時，容器距離左側(cè)為-100%，.panel-active.overlay 表示當激活時，疊加層位置為向右移動50%，.panel-active.container-signin 表示當激活時，登錄層位置為向右移動100%，.panel-active.container-signup 表示當激活時，注冊層透明度為1，注冊層層級為5，注冊層位置為向右移動100%。
到此這篇關(guān)于HTML+CSS實現(xiàn)炫酷登錄切換的文章就介紹到這了,更多相關(guān)HTML CSS登錄切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
超級簡單 jQuery+JS+HTML+CSS實現(xiàn)的炫酷登錄注冊界面
這兩天根據(jù)需求寫了一個比較好看的有動態(tài)效果的登錄注冊切換頁面，這里我將源碼資源分享給大家，大家可以直接免費下載使用哦，沒有 vip 的小伙伴找我私聊發(fā)送"登錄注2023-06-13
這篇文章主要介紹了html+css3實現(xiàn)的登錄界面的示例代碼，幫助大家更好的制作網(wǎng)頁，感興趣的朋友可以了解下2020-12-09
基于html+css做一個好看的可翻轉(zhuǎn)登錄注冊界面
這篇文章主要介紹了基于html+css做一個好看的可翻轉(zhuǎn)登錄注冊界面,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-18
這篇文章主要介紹了HTML+CSS實現(xiàn)動態(tài)背景登錄頁面的相關(guān)資料,需要的朋友可以參考下2017-06-23- html+css實現(xiàn)的登錄界面，要注意文檔流的概念，如果一個元素的沒有被聲明為float，absolute,relative,那么他就是按照默認的文檔流定位模式2014-05-21
