Material景点文本框实现效果（抖音联想）

讨厌话多，直接上菜

      <div className="form-item">
        <input id="username" type="text" required autoComplete="off" />
        <span className="bar"></span>
        <label htmlFor="username">Username</label>
      </div>

  .form-item {
    margin-top: 50px;
    position: relative;
    width: 400px;
    #username {
      width: 100%;
      outline: none;
      border: none;
      border-bottom: 1px solid #ccc;
      background-color: #f0f2f5;
    }
    .bar {
      position: absolute;
      width: 0;
      height: 2px;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #5264ae;
      transition: 0.4s ease;
    }
    // 输入框聚焦
    input:focus ~ .bar {
      width: 100%;
    }
    input:valid ~ label,
    input:focus ~ label {
      color: #5264ae;
      transform: translateY(-40px);
      transition: 0.4s ease;
      font-size: 16px;
    }
    label {
      position: absolute;
      top: 0;
      left: 0;
      color: rgb(175, 171, 171);
    }
  }