input实现底部横线动画

.input_bottom{
 	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;
    /* background-color: rgba(0,0,0,0); */
    border: none;
    outline: none;
    transition: all .5s;
    
}
input[type="text"]:focus{
    background-size: 100% 2px,100% 1px;
}

<input type="text" class="input_bottom" placeholder="输入名字" />