HTML+CSS 实现一个简单的登录页面 (背景图片完全适应 不失帧)
HTML:<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="css/tx1.css" /&...
文章共439字 · 阅读需要大约2分钟
一键AI生成摘要,助你高效阅读
问答
·
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/tx1.css" />
</head>
<body>
<div class="login-box">
<h2>Login</h2>
<form>
<div class="login-field">
<input type="text" name="" required="" />
<label>Username</label>
</div>
<div class="login-field">
<input type="password" name="" required="" />
<label >Password</label>
</div>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
css:
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: url(../img/bg.jpg) no-repeat center 0px;
background-size: cover;
background-position: center 0;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
}
.login-box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 400px;
padding:40px;
background: rgba(0,0,0,.8);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0,0,0,.5);
border-radius: 10px;
}
.login-box h2{
margin: 0 0 30px;
padding: 0;
text-align: center;
color: #fff;
}
.login-box .login-field{
position: relative;
}
.login-box .login-field input{
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #fff;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
}
.login-box .login-field label{
position: absolute;
top: 0;
left: 0;
letter-spacing: 1px;
padding: 10px 0;
font-size: 16px;
color: #fff;
pointer-events: none;
transition: .5s;
}
.login-box .login-field input:focus ~ label,
.login-box .login-field input:valid ~ label{
top: -23px;
left: 0;
color: aqua;
font-size: 12px;
}
.login-box button{
background: transparent;
border: none;
outline: none;
color: #fff;
background: #03a9f4;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
}
更多推荐
已为社区贡献1条内容
所有评论(0)