<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
padding:0;
margin:0;
box-sizing:border-box;
font-family:"方正舒体";
}
body{
height:100vh;
width:100%;
background-image:url(./img/月亮.png);
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
padding:0 10%;
}
.container{
width:100%;
max-width:470px;
padding:30px 20px;
background:rgba(10,10,10,.45);
border:1px solid #eee;
border-radius:16px;
}
.container h1{
text-align:center;
color:##ff;
font-size:2.5rem;
font-weight:600;
padding:0 0 8px 0;
}
.container form{
padding:0 50px;
}
form .main{
position:relative;
margin:30px 0;
border-bottom:1px solid #fafafa;
}
.main input{
width:100%;
padding:0 5px;
font-size:1rem;
height:40px;
border:none;
outline:none;
background:none;
color:#75c5c2;
}
.main label{
position:absolute;
top:50%;
left:6px;
color:#75c5c2;
transform:translatey(-50);
font-size:1.1rem;
pointer-events:none;
transition:all .50s ease;
}
.main span::before{
position:absolute;
content:'';
left:0;
top:35px;
width:100%;
height:-2px;
}
.main input:focus ~ label,
.main input:valid ~ label{
top:-3px;
color:#fff;
}
.pass{
margin:-6px 0 20px 5px;
color:#fff;
cursor:pointer;
}
.pass:hover{
text-decoration:underline;
}
input[type="submit"]{
height:45px;
width:100%;
border:none;
background:#75c5c2;
color:#fff;
font-size:1.1rem;
border-radius:16px;
cursor:pointer;
}
.signup{
color:#fff;
font-size:1rem;
text-align:center;
margin:30 0;
cursor:pointer;
}
.signup a{
margin-left:10px;
text-decoration:none;
color:#fff;
}
.signup a:hover{
text-decoration:underline;
color:#75c5c2;
}
</style>
</head>
<body>
<div class="container">
<h1>登录</h1>
<form method="post" action="#">
<div class="main">
<input type="text" name="" required>
<span></span>
<label>用户名</label>
</div>
<div class="main">
<input type="text" name="" required>
<span></span>
<label>密码</label>
</div>
<div class="pass">忘记密码</div>
<input type="submit" value="登录">
<div class="signup">
没有账户？<a href="http://www.填表单页面.com">马上注册</a>
</div>
</form>
</div>
</body>
</html>
