SOURCE

<div class="container">
    <input type="text" placeholder="底部边框input"/>
    <span class="borderBottom"></span>
</div>

body{
    background-color: #fff;
}
  .container {
      width: 300px;
      position: relative;
  }
  input {
      outline: none;
      width: 100%;
      border: 0;
      height: 30px;
      line-height: 30px;
      border-bottom: 1px solid #ccc;
  }

.borderBottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #3399ff;
    transition: 0.4s;
}
input:focus ~ .borderBottom {
    width: 100%;
    transition: 0.3s;
    left: 0;
}