input聚焦 css动画效果

参考地址： http://www.htmleaf.com/css3/ui-design/201604253388.html

input-style.css 中有多种样式可供参考，拿自己需要的即可。

 

输入框效果：聚焦后从中间到两端动画展示

 

 

 

 

html:

    <input
          autofocus
          type="text"
          v-model.trim="params.username"
          @input="changeUserInput"
          placeholder="请输入用户名"
          @keyup.enter="submit"
          class="font18_1024 effect-1"
        />
        <span class="focus-border"></span> 

 

css: 

.focus-border {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1px;
    background-color: #2188F7;
    transition: 0.4s;
}

.effect-1:focus~.focus-border,
.effect-2:focus~.focus-border,
.effect-3:focus~.focus-border {
    width: 100%;
    transition: 0.2s;
    transition-delay: 0.1s;
    left: 0;
}