效果图
代码展示
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Login Form Design</title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div class="box">
<h2>Login</h2>
<form action="https://space.bilibili.com/358564498" method="get">
<div class="inputBox">
<input type="text" id="username" required>
<label for="username">Username</label>
</div>
<div class="inputBox">
<input type="password" id="pwd" required>
<label for="pwd">Password</label>
</div>
<input type="submit" value="Submit">
</form>
</div>
<div class="bear"></div>
</body>
</html>
css
body{
position: relative;
margin: 0 auto;
padding: 0;
height: 560px;
background-image: url(./img/beach.jpg);
background-size: cover;
background-position: center center;
font-family: sans-serif;
background-repeat: no-repeat;
}
body .box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 360px;
padding: 36px;
background: rgba(0, 0, 0, .8);
box-sizing: border-box;
box-shadow: 0px 6px 15px 6px rgba(0, 0, 0, .5);
border-radius: 10px;
}
.box h2 {
margin: 0 0 30px;
padding: 0;
color: #fff;
text-align: center;
}
.box .inputBox {
position: relative;
}
.box .inputBox input {
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #fff;
letter-spacing: 2px;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
}
.box .inputBox label {
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
font-size: 16px;
color: #fff;
pointer-events: none;
transition: .6s;
}
.box .inputBox input:focus ~ label,
.box .inputBox input:valid ~ label
{
top: -30px;
left: 0;
color: #03a9f4;
font-size: 18px;
}
.box .inputBox #username:focus {
border-bottom: 3px solid #fff;
}
.box .inputBox #pwd:focus {
border-bottom: 3px solid #fff;
}
.box input[type="submit"] {
display: block;
background: transparent;
border: none;
outline: none;
color: #fff;
background: #5800FF;
margin: 0 auto;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
}
.bear {
position: absolute;
top: 440px;
left: 0;
width: 200px;
height: 100px;
background: url(./img/bear.png) no-repeat;
animation: bear 1s steps(8) infinite, move 3s linear forwards;
}
@keyframes bear {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
transform: translateX(-50%);
}
}