点击输入框 提示上移 Css过渡动画

// HTML 部分

<div class="inputDiv">

      <input type="" name="" id="" value="" required/>

      <label>ID</label>

</div>

// css 部分

.inputDiv {

         width: 500px;

          position: relative;

          margin-top: 50px;

}

.inputDiv input {

  outline: none;

  border: none;

  width: 100%;

  color: #000;

  font-size: 16px;

  border-bottom: 1px solid rgb(43, 55, 214);

background: none;

}

.inputDiv label {

  position: absolute;

  top: 0;

  left: 0;

  color: #000;

  font-size: 16px;

  // 不加鼠标放在 'ID' 上会显示鼠标 而不是输入键 当然你可以把

  pointer-events: none;

  transition: all 0.5s;

}

.inputDiv input:focus ~ label,

.inputDiv input:valid ~ label {

  font-size: 12px;

  top: -100%;

  color: #2b37d6;

}