css3优美登录页面

CSS3在网页设计中发挥着重要作用， 同时也为登录页面设计提供了强大的支持。下面是一些使用CSS3设计的优美登录页面的代码：

/*使用CSS3实现的优美登录页面*/
/* 设置背景颜色 */
body {
background-color: #00256e;
}
/* 登陆容器样式 */
.login-container {
width: 400px;
height: 500px;
margin: 0 auto;
background-color: #e6e6e6;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0,0,0,0.6);
}
/* 登陆页面LOGO */
.logo {
width: 150px;
height: 150px;
margin: 50px auto 20px;
border-radius: 50%;
background-image: url("assets/logo.png");
background-size: cover;
background-repeat: no-repeat;
}
/* 登陆表单样式 */
.form {
width: 80%;
margin: 30px auto;
}
.form input {
width: 100%;
height: 40px;
margin-bottom: 20px;
border: none;
border-radius: 20px;
outline: none;
padding: 0 20px;
font-size: 18px;
color: #555;
}
.form button {
width: 100%;
height: 50px;
background-color: #00256e;
color: #fff;
border: none;
border-radius: 25px;
font-size: 20px;
cursor: pointer;
}
.form button:hover {
background-color: #0d47a1;
}
/* 登陆页面文本样式 */
.text {
width: 80%;
margin: 0 auto;
color: #555;
text-align: center;
font-size: 16px;
margin-top: 20px;
}
.text a {
color: #0d47a1;
text-decoration: none;
}
.text a:hover {
text-decoration: underline;
}

以上代码用于创建一个具备美观效果的登录页面，其中包含用于设置背景颜色、登录容器样式、登录页面LOGO、登陆表单样式以及登录页面文本样式等各种要素。这些特性可以帮助您设计一个样式与功能兼备的登录网页。

查看更多关于css3优美登录页面的详细内容...