使用css3+html實作炫酷的登陸頁面demo
效果如圖：
直接上代碼：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>登入框</title>
<style>
*{
padding:0;
margin:0;
}
.wrap {
background-image: linear-gradient(to right,#000000, #424242);
position: fixed;
width: 100%;
height: 100%;
}
.login{
position: absolute;
left:50%;
top:200px;
width:300px;
margin-left: -150px;
}
.title{
width: 100%;
text-align: center;
heigth: 50px;
line-height: 50px;
font-size:22px;
color: #fff;
text-shadow: 5px 5px 5px #0000ca;
margin-bottom: 20px;
}
.form-item{
position: relative;
width: 100%;
height:50px;
}
.form-item input{
position: relative;
width: 100%;
color:#3c70ff;
font-size: 16px;
background-color: transparent;
border:0;
border-bottom: 1px solid #3c70ff;
outline: none;
z-index:10;
}
.form-item label{
position: absolute;
left:0;
top:-5px;
font-size:20px;
color:#3c70ff;
transition: all .5s;
}
.form-item input:focus+label,.form-item input:valid+label{
top:-20px;
font-size:16px;
}
.btn{
width:80px;
height: 40px;
text-align: center;
padding:10px;
margin-top: 20px;
border:0;
color:#fff;
text-transform: uppercase;
letter-spacing:2px;
background-color: #414141;
position: relative;
overflow: hidden;
}
.btn:hover{
background-color: #3c70ff;
box-shadow: 0 0 5px #3c70ff,
0 0 25px #3c70ff,
0 0 50px #3c70ff,
0 0 75px #3c70ff;
}
.btn span:nth-of-type(1){
width: 100%;
height: 2px;
position: absolute;
left: -100%;
top:0;
background-image: linear-gradient(to right,#3c70ff,#203d8b);
animation: line1 1s linear infinite;
}
.btn span:nth-of-type(2){
width: 2px;
height: 100%;
position: absolute;
right: 0;
top:-100%;
background-image: linear-gradient(#3c70ff,#203d8b);
animation: line2 1s .25s linear infinite;
}
.btn span:nth-of-type(3){
width: 2px;
height: 100%;
position: absolute;
left: 0;
bottom:-100%;
background-image: linear-gradient(#3c70ff,#203d8b);
animation: line3 1s .5s linear infinite;
}
.btn span:nth-of-type(4){
width: 100%;
height: 2px;
position: absolute;
right: -100%;
bottom:0;
background-image: linear-gradient(to left,#3c70ff,#203d8b);
animation: line4 1s .75s linear infinite;
}
@keyframes line1{
50%,100%{
left:100%;
}
}
@keyframes line2{
50%,100%{
top:100%;
}
}
@keyframes line3{
50%,100%{
bottom:100%;
}
}
@keyframes line4{
50%,100%{
right:100%;
}
}
</style>
</head>
<body>
<div class="wrap">
<div class="login">
<div class="title">登入框</div>
<form action="">
<div class="form-item">
<input type="text" required>
<label for="">username</label>
</div>
<div class="form-item">
<input type="password" required>
<label for="">password</label>
</div>
<button class="btn">
submit
<span></span>
<span></span>
<span></span>
<span></span>
</button>
</form>
</div>
</div>
</body>
</html>
![沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)