CSS絕美登錄框

在網(wǎng)站開發(fā)中，登錄框是必不可少的元素，而一個(gè)美觀的登錄框可以提高用戶對網(wǎng)站的好感度和使用體驗(yàn)。下面我們就來分享一款精美的CSS絕美登錄框的實(shí)現(xiàn)。

/* HTML代碼 */
<div class="login-box">
<h2>歡迎訪問</h2>
<h3>絕美登錄框</h3>
<form action="#" method="post">
<label for="username">用戶名:</label>
<input type="text" id="username" name="username" placeholder="請輸入用戶名">
<label for="password">密    碼:</label>
<input type="password" id="password" name="password" placeholder="請輸入密碼">
<button type="submit">登錄</button>
</form>
</div>
/* CSS代碼 */
.login-box {
position: relative;
width: 400px;
height: 450px;
margin: 50px auto;
background-color: #fff;
border-radius: 10px;
box-shadow: 1px 1px 10px rgba(0, 0, 0, .5);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
}
.login-box::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("https://picsum.photos/id/237/2000/1200");
background-size: cover;
filter: blur(5px);
z-index: -1;
}
.login-box h2, .login-box h3 {
margin: 0;
padding: 0;
color: #333;
font-size: 22px;
text-shadow: 1px 1px 2px #ccc;
}
.login-box h3 {
margin-top: 10px;
margin-bottom: 50px;
font-size: 32px;
}
.login-box form {
width: 70%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.login-box label {
margin-top: 20px;
margin-bottom: 10px;
color: #333;
font-size: 18px;
}
.login-box input[type="text"], .login-box input[type="password"] {
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}
.login-box input[type="text"]:focus, .login-box input[type="password"]:focus {
outline: none;
}
.login-box button[type="submit"] {
width: 100%;
margin-top: 20px;
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
color: #fff;
background-color: #333;
cursor: pointer;
transition: all .3s ease-in-out;
}
.login-box button[type="submit"]:hover {
background-color: #111;
}

該絕美登錄框采用了柔和的顏色搭配和清晰的字體，同時(shí)還加入了一個(gè)背景圖來增加整個(gè)登錄框的高級感。CSS中的屬性也比較簡單，采用了flex布局來排版，同時(shí)設(shè)置了陰影和圓角來增強(qiáng)立體感。按鈕在hover時(shí)還有層疊效果，讓用戶更加直觀的感受到操作響應(yīng)。

以上就是介紹給大家的這款CSS絕美登錄框，希望能夠給你的網(wǎng)站開發(fā)帶來幫助，同時(shí)也鼓勵(lì)大家多動(dòng)手嘗試，打造屬于自己的高級登錄框。