css技巧系列之(六) 输入框交互效果

实现效果：

实现源码：

   .box {
        width: 100%;
        height: 100vh;
        background-color: #ffffff;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .label {
        width: 190px;
        height: 68px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        cursor: text;
      }
      .span {
        width: 100%;
        color: #000;
        font-size: 14px;
        margin-bottom: 6px;
        padding: 0 10px;
      }
      .inp {
        width: 100%;
        padding: 0 10px;
        height: 2px;
        border: 0;
        font-size: 14px;
        box-sizing: border-box;
        background-color: rgba(0, 0, 0, 0.1);
        transition: 0.3s;
      }
      .inp:hover {
        background-color: rgba(50, 133, 255, 0.7);
      }
      .inp:focus,
      .inp:valid {
        background-color: rgba(50, 133, 255, 0.2);
        border: 2px solid rgba(50, 133, 255, 0.7);
        border-radius: 4px;
        height: 42px;
        color: #000;
      }

   <div class="box">
      <label class="label">
        <span class="span">用户名</span>
        <input class="inp" type="text" required />
      </label>
    </div>

css技巧效果到此结束，如果喜欢加个关注，可以在样式中寻找开发中的UI，可直接复制看效果。公众号地址