前端动画专题（二）：输入框特效

本文来自「心谭博客」的《动画设计·输入框特效》，更多文章放在了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 {