本文来自「心谭博客」的《动画设计·输入框特效》,更多文章放在了Github
欢迎交流和Star
特效一览
划线动态:
动态边框:
划线动态
效果图
原理和代码
:before
和 :after
伪元素指定了一个元素文档树内容之前和之后的内容。由于input
标签不是可插入内容的容器。所以这里下划线无法通过伪元素来实现。需要借助其他 dom 节点。
<div>
<input type="text" />
<span></span>
</div>
包裹在外的父元素div
应该设置成inline-block
,否则宽度会满屏。
div {
position: relative;
display: inline-block;
}
input
标签需要禁用默认样式:
input {
outline: none;
border: none;
background: #fafafa;
}
span
标签实现「左进右出」的动态,需要改变transform-origin
方向。为了避免回流重绘,通过scaleX
来实现宽度变化的视觉效果。
input ~ span {
position<