具体效果实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input下拉横线动画实现</title>
<style>
body{
background-color: #0b151d
}
.form-line{
border: 0 none;background-image: linear-gradient(#44dcfd,#44dcfd),linear-gradient(#1f3144,#1f3144);
background-size: 0px 2px,100% 1px;
background-repeat: no-repeat;background-position: center bottom,center calc(100% - 1px);
background-color: rgba(0,0,0,0);
}
input[type="text"]:focus{
background-size: 100% 2px,100% 1px;
transition: all .5s;
border: none;
outline: none;
}
</style>
</head>
<body>
<input type="text" class="form-line" placeholder="输入名字" />
</body>
</html>