前台动画专题(二):输入框特效
本文来自「心谭博客」的《动画设计·输入框特效》,更多文章放在了Github
欢迎交流和Star
特效一览
划线动态:
image
动态边框:
image
划线动态
效果图
image
原理和代码
: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: 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;}
动态边框
效果图
image
原理和代码
如动态图所示,有 4 条边框。所以除了input
元素外,还需要准备其余 4 个 dom。为了方便定位,嵌套一个父级元素。
<div> <input type="text"> <span class="bottom"></span> <span class="right"></span> <span class="top"></span> <span></div>
和「划线动态」相似,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;}
参考链接
- 为什么 input 不支持伪元素(:after,:before)?
更多文章
- 动画设计·字体特效
- 动画设计·输入框特效
- 动画设计·按钮特效
- 动画设计·Loader特效·基础篇
- 动画设计·Loader特效·进阶篇
说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 前台动画专题(二):输入框特效
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 前台动画专题(二):输入框特效