聚焦时边框颜色渐变：利用 :focus 和 transition 实现平滑变色；2. 下划线伸缩动画：通过 ::after 与 @keyframes 创建线条展开效果；3. 浮动标签：结合 :placeholder-shown 与相邻选择器使占位符上移缩小；4. 阴影扩散：使用 box-shadow 配合 transition 增强交互感知。合理运用 CSS 动画属性可提升输入框交互体验，关键在于控制过渡时长与缓动函数，确保效果自然流畅，避免影响可用性。
输入框动画能提升用户体验，让界面更生动。实现这类效果主要依靠 CSS 的 :focus 伪类、transition 过渡属性以及一些创意设计。以下是几种常见且实用的输入框动画实现方式。
1. 聚焦时边框颜色渐变
当用户点击输入框时，边框平滑变色，是最基础也最常用的动画效果。
.input-basic { padding: 10px; border: 2px solid #ccc; border-radius: 4px; outline: none; transition: border-color 0.3s ease;}.input-basic:focus { border-color: #007bff;}
说明：使用 transition 控制 border-color 变化的时间和缓动效果，避免生硬跳变。
2. 下划线伸缩动画
输入框初始只有底部细线，聚焦时线条从中间向两边伸展。
立即学习“前端免费学习笔记（深入）”；
.input-underline { position: relative; border: none; padding: 10px 0; border-bottom: 2px solid #ddd; background: transparent; transition: border-bottom-color 0.3s;}.input-underline:focus { outline: none; border-bottom-color: transparent;}.input-underline:focus::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #007bff; animation: extendLine 0.4s ease forwards;}@keyframes extendLine { from { width: 0; } to { width: 100%; }}
技巧：通过 ::after 伪元素配合关键帧动画，实现动态伸展效果，视觉更吸引人。
PicDoc
AI文本转视觉工具，1秒生成可视化信息图
6214 查看详情
3. 标签上移（浮动标签）
占位符文字在输入时上移并缩小，常用于表单设计。
.field { position: relative; margin: 20px 0;}.field input { padding: 10px; font-size: 16px; border: 1px solid #aaa; border-radius: 4px; outline: none; transition: all 0.3s;}.field label { position: absolute; left: 10px; top: 10px; font-size: 16px; color: #888; pointer-events: none; transition: 0.3s ease;}.field input:focus,.field input:not(:placeholder-shown) { padding-top: 20px;}.field input:focus + label,.field input:not(:placeholder-shown) + label { top: 2px; left: 8px; font-size: 12px; color: #007bff;}
原理：利用 :placeholder-shown 判断是否输入内容，结合 + 相邻兄弟选择器控制 label 动画。
4. 阴影扩散效果
聚焦时添加柔和的外发光，增强可交互感。
.input-shadow { padding: 10px; border: 1px solid #ccc; border-radius: 6px; outline: none; transition: box-shadow 0.3s;}.input-shadow:focus { box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);}
提示：调整 rgba 中的透明度和模糊半径，可以让阴影更自然。
基本上就这些。合理组合 transition、伪类和 keyframes，就能做出专业又流畅的输入框动画。关键是控制好动画时长和缓动函数，避免过度炫技影响 usability。
以上就是如何用css实现输入框动画效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/990695.html
微信扫一扫 
支付宝扫一扫 
