登录输入框滑动条

最新推荐文章于 2024-10-01 23:20:42 发布

#Ltf

最新推荐文章于 2024-10-01 23:20:42 发布

阅读量175

点赞数

分类专栏： css 文章标签： CSS动画焦点效果输入框滑动条过渡效果

本文链接：https://blog.csdn.net/weixin_46032911/article/details/119251245

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

登录输入框获取焦点时底部带有从中心向两边滑动的滑动条！

    label {
      display: block;
      position: relative;
    }

    input {
      width: 50%;
      border: none;
      outline: none;
      background: transparent;
      border-bottom: 1px solid rgba(27, 52, 136, 0.1);
    }
    input:focus~.border {
      transform: scale(1, 1);
    }
    .border {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 50%;
      height: 2px;
      background: rgb(153, 21, 21);
      transform: scale(0, 1);
      transition: 0.2s ease;
    }

  <div class="formRight">
    <form>
      <section>
        <label>
          <p>用户名</p>
          <input type="text" placeholder=" ">
          <div class="border"></div>
        </label>
      </section>
    </form>
  </div>