web前端动画专题(2):输入框特效

特效一览

划线动态

成都创新互联公司主要从事成都做网站、成都网站制作、成都外贸网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务桐庐,10多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

web前端动画专题(2):输入框特效

动态边框

web前端动画专题(2):输入框特效

划线动态

效果图

web前端动画专题(2):输入框特效

原理和代码

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


web前端开发学习Q-q-u-n: 784783012 ,分享开发工具,零基础,进阶视频教程,希望新手少走弯路

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


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

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


input {
  outline: none;
  border: none;
  background: #fafafa;
}

span 标签实现「左进右出」的动态,需要改变 transform-origin 方向。为了避免回流重绘,通过 scaleX 来实现宽度变化的视觉效果。


input ~ span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: #262626;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.3s ease-in-out;
}
input:focus ~ span {
  transform: scaleX(1);
  transform-origin: left center;
}

动态边框

效果图

web前端动画专题(2):输入框特效

原理和代码

如动态图所示,有 4 条边框。所以除了 input 元素外,还需要准备其他 4 个 dom。为了方便定位,嵌套一个父级元素。


web前端开发学习Q-q-u-n: 784783012 ,分享开发工具,零基础,进阶视频教程,希望新手少走弯路

和「划线动态」类似,input 和 div 的样式基本一样。为了好看,改一下 padding 属性。


div {
  position: relative;
  display: inline-block;
  padding: 3px;
}
input {
  outline: none;
  border: none;
  background: #fafafa;
  padding: 3px;
}

对于其他 4 个 span 元素,它们的位置属性,动画属性,以及颜色都是相同的:


.bottom,
.top,
.left,
.right {
  position: absolute;
  background-color: #262626;
  transition: transform 0.1s ease-in-out;
}

对于.bottom 和.top,它们的变化方向是水平;对于.left 和.right,它们的变化方向是垂直。


.bottom,
.top {
  left: 0;
  right: 0;
  height: 1px;
  transform: scaleX(0);
}
.left,
.right {
  top: 0;
  bottom: 0;
  width: 1px;
  transform: scaleY(0);
}

下面就是处理延时的特效。动态图中,动画按照下、右、上、左的顺序依次变化。借助的是 transition-delay 属性,来实现动画延迟。


.bottom {
  bottom: 0;
  transform-origin: right center;
}
input:focus ~ .bottom {
  transform: scaleX(1);
  transform-origin: left center;
}
.top {
  top: 0;
  transform-origin: left center;
  transition-delay: 0.2s;
}
input:focus ~ .top {
  transform: scaleX(1);
  transform-origin: right center;
}
.right {
  transform-origin: top center;
  right: 0;
  transition-delay: 0.1s;
}
input:focus ~ .right {
  transform: scaleY(1);
  transform-origin: bottom center;
}
.left {
  left: 0;
  transform-origin: bottom center;
  transition-delay: 0.3s;
}
input:focus ~ .left {
  transform: scaleY(1);
  transform-origin: top center;
}
web前端开发学习Q-q-u-n: 784783012 ,分享开发工具,零基础,进阶视频教程,希望新手少走弯路


当前名称:web前端动画专题(2):输入框特效
网址分享:http://azwzsj.com/article/jeohpj.html