css
<link href="https://cdn.bootcss.com/font-awesome/5.11.2/css/all.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.css" rel="stylesheet">
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
background: url("../img/xhc1.jpg") no-repeat;
background-size: cover;
}
#container{
display: block;
width: 600px;
height: 300px;
background-color: rgba(0,0,0,0.6);
margin: 0 auto;
position: relative;
top: 250px;
border-radius: 10px;
}
#inner{
display: none;
width: 300px;
height: 300px;
background-color: #cccccc;
margin: 0 auto;
position: relative;
}
#inner span{
display: none;
}
.name{
position: relative;
left: 200px;
outline-style: none;
width: 240px;
height: 30px;
border-style: none;
border-bottom: 2px solid #FFFFFF;
background-color: rgba(0,0,0,0);
font-size: 20px;
color: #FFFFFF;
}
.password{
position: relative;
left: 200px;
top: 30px;
outline-style: none;
width: 240px;
height: 30px;
border-style: none;
border-bottom: 2px solid #FFFFFF;
background-color: rgba(0,0,0,0);
font-size: 20px;
color: #FFFFFF;
}
.login{
display: block;
font-size: 35px;
color: #ffffff;
text-align: center;
font-family: Constantia;
font-weight: bold;
padding-top: 30px;
padding-bottom: 20px;
}
#check{
position: relative;
left: 160px;
top: 40px;
width: 240px;
height: 20px;
opacity: 0.5;
}
.check_text{
color: rgba(255,255,255,0.5);
font-size: 17px;
margin-left: 60px;
position: relative;
top: 35px;
}
#set{
position: absolute;
top: 235px;
left: 200px;
width: 110px;
height: 30px;
font-size: 17px;
color: #ffffff;
text-align: center;
font-family: Constantia;
background:linear-gradient(100deg, #ff8b2c, #1eff8f 20%, #dbe2a6, #fdff27) ;
border-radius: 15px;
}
#get{
border-radius: 15px;
position: absolute;
top: 235px;
left: 330px;
width: 110px;
height: 30px;
font-size: 17px;
color: #ffffff;
text-align: center;
font-family: Constantia;
background:linear-gradient(100deg, #1c803e, #6464ff 20%,blueviolet, #ff14b1) ;
}
.nameicon{
display: inline-block;
color: #FFFFFF;
position: absolute;
top: 105px;
left: 170px;
width: 30px;
height: 30px;
}
.passicon{
display: inline-block;
width: 30px;
height: 30px;
color: #FFFFFF;
position: absolute;
top: 170px;
left: 170px;
}
</style>
html
<div id="container" class="animated bounceInLeft">
<span class="login">Login</span>
<span class="nameicon"><i class="fa fa-user-circle"></i></span><input class="name" placeholder="Username" type="text" id="getusername"><br>
<span class="passicon"><i class="fa fa-key"></i></span><input class="password" placeholder="Password" type="password" id="getpassword"><br>
<input type="checkbox" id="check"><span class="check_text">记住密码</span><br>
<input type="button" value="注册" id="set">
<input type="button" value="登录" id="get">
</div>
