当输入框获得焦点的时候,会出现动画效果,下面放代码
<div class="login-input">
<input type="text" placeholder="邮箱" class="active-input">
<span class="from-box-line"></span>
</div>
css代码:(编写好看的样式)
.from-box-line{
width: 0;
height: 1px;
background: #ff8005;
position: absolute;
bottom: -1px;
left: 0;
display: inline-block;
z-index: 1;
transition: width 1s;
-moz-transition: width 1s;
/* Firefox 4 */
-webkit-transition: width 1s;
/* Safari 和 Chrome */
-o-transition: width 1s;
/* Opera */
}
.active-input:focus~.from-box-line {
width: 100%;
}
输入框的样式自己设计哦