动画如下
实现第一个动画的原理和动画
:before 和 :after伪元素指定了一个元素文档树内容之前和之后的内容。由于input标签不是可插入内容的容器。所以这里下划线无法通过伪元素来实现。需要借助其他 dom 节点。
<div class="active-input">
<input placeholder="input underline" class="input"/>
<span class="input-span"></span>
</div>
包裹在外的父元素div应该设置成inline-block,否则宽度会满屏
input 标签需要禁用默认样式:
span标签实现「左进右出」的动态,需要改变transform-origin方向。为了避免回流重绘,通过scaleX来实现宽度变化的视觉效果。
.active-input{
position relative
display inline-block
}
input{
outline none
background #FAFAFA
border none
}
.input-span{
width: 100%
position absolute
bottom:0
left: 0
height 1px
background #262626
transform scale(0)
transform-origin right center
transition transform 0.3s ease-in-out
}
input:focus ~ .input-span{
transform scale(1)
transform-origin left center
}
第二种实现原理
<div class="active-input">
<input placeholder="input underline" class="input"/>
<span class="bottom"></span>
<span class="right"></span>
<span class="top"></span>
<span class="left"></span>
</div>
下面就是处理延时的特效。动态图中,动画按照下、右、上、左的顺序依次变化。借助的是transition-delay属性,来实现动画延迟。
.active-input
position relative
display inline-block
padding 3px
input
outline none
background #FAFAFA
border none
padding 3px
.bottom,.right,.top,.left
position absolute
background #262626
transition transform 0.1s ease-in-out
.bottom,.top
width 100%
height 1px
left: 0
right: 0
transform scaleX(0)
.left,.right
width 1px
height 100%
top:0
bottom 0
transform scaleY(0)
.bottom
bottom 0
transform-origin right center
input:focus~.bottom
transform scaleX(1)
transform-origin left center
.right
right:0
transform-origin top center
transition-delay 0.1s
input:focus~.right
transform scaleY(1)
transform-origin bottom center
.top
top 0
transform-origin left center
transition-delay 0.2s
input:focus~.top
transform scaleX(1)
transform-origin right center
.left
left:0
transform-origin bottom center
transition-delay 0.3s
input:focus ~ .left
transform: scaleY(1);
transform-origin: top center;