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

特效一览

划线动态：

动态边框：

划线动态

效果图

原理和代码

:before 和 :after伪元素指定了一个元素文档树内容之前和之后的内容。由于input标签不是可插入内容的容器。所以这里下划线无法通过伪元素来实现。需要借助其他 dom 节点。

<div>
  <input type="text" />
  <span></span>
</div>

包裹在外的父元素div应该设置成inline-block，否则宽度会满屏。

div {
  position: relative;
  display: inline-block;
}

input 标签需要禁用默认样式：

input