css绝美登录框 |css 成功动画

在网站开发中，登录框是必不可少的元素，而一个美观的登录框可以提高用户对网站的好感度和使用体验。下面大家就来分享一款精美的CSS绝美登录框的实现。

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

该绝美登录框采用了柔和的颜色搭配和清晰的字体，同时还加入了一个背景图来增加整个登录框的高级感。CSS中的属性也比较简单，采用了flex布局来排版，同时设置了阴影和圆角来增强立体感。按钮在hover时还有层叠效果，让用户更加直观的感受到操作响应。

以上就是介绍给大家的这款CSS绝美登录框，希望能够给你的网站开发带来帮助，同时也鼓励大家多动手尝试，打造属于自己的高级登录框。