HTML+CSS：酷炫的登录界⾯
跟着up主码⼩渣学习（有⼀些的改动）
效果：
代码如下：
HTML：
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="sign.css">    </head>
<body>
<div class="box">
<h2>Login</h2>
<form action="">
<div class="item">
<input type="text" required>
<lable for="">UserName</lable>
</div>
<div class="item">
<input type="password" required>
<lable for="">PassWord</lable>
</div>
<button class="btn">submit
<span></span>
<span></span>
<span></span>
<span></span>
</button>
</form>
</body>
</html>
CSS：
*{
margin: 0;
padding: 0;
}
h2{
text-align: center;
color: #fff;
margin-bottom: 30px;
}
body{
height: 100vh;/*视⼝的⼤⼩被分为100vh*/ background:linear-gradient(#aad0d1,#c3dce0); display: flex;
justify-content: center;
font-size: 16px;
align-items: center;/*弹性盒⼦在纵轴上居中*/
color: #c6fafe
}
.box{
width: 400px;
height: 364px;
background: #83afb2;
box-shadow: 0 15px 25px 0 #628082;
box-sizing: border-box;
padding: 40px;
}
.item{
height: 45px;
border-bottom: 1px solid #fff;
margin-bottom: 40px;
position: relative;
}
.item input{
width:100%;
color: #fff;
padding-top: 20px;
box-sizing: border-box;
}
.item input:focus+lable ,.item input:valid+lable{
top: 0px;
font-size: 12px;
transition: all 0.5 linear;
}
.item lable{
position: absolute;
left: 0;
top: 12px;
transition: all 0.5s linear;
}
input,button{
background: transparent;
border: none;
outline: none;
}
.btn{
padding: 10px 20px;
/*border: 1px solid #fff;*/
margin-top: 30px;
color: #c6fafe;
position:relative;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 2px;
}
.btn:hover{
border-radius: 5px;
color: #fff;
box-shadow: 0 0 5px 0 #c6fafe,
0 0 25px 0 #c6fafe,
0 0 50px 0 #c6fafe,
0 0 100px 0 #c6fafe;
}
.btn>span{
position: absolute;
}
.btn>span:nth-child(1){
width: 100%;
height: 2px;
background:-webkit-linear-gradient(left,transparent,#c6fafe); left: -100%;
top: 0px;
animation: lin1 1s linear infinite;
}
.btn>span:nth-child(4){
width: 2px;
height: 100%;
background:-webkit-linear-gradient(bottom,transparent,#c6fafe); bottom: -100%;
left: 0px;
animation: lin4 1s linear infinite;
}
.btn>span:nth-child(2){
width: 2px;
height: 100%;
background:-webkit-linear-gradient(top,transparent,#c6fafe); right: 0px;
top: -100%;
animation: lin2 1s linear infinite;
html span 居中
}
.btn>span:nth-child(3){
width: 100%;
height: 2px;
background:-webkit-linear-gradient(right,transparent,#c6fafe); right: -100%;
bottom: 0px;
animation: lin3 1s linear infinite;
}
@keyframes lin1{
50%,100%{
left: 100%;
}
}
@keyframes lin2{
50%,100%{
top: 100%;
}
}
@keyframes lin3{
50%,100%{
right: 100%;
}
}
@keyframes lin4{
50%,100%{
bottom: 100%;
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。