通过CSS的:focus伪类结合transition和transform，可实现边框变色、下划线伸展、标签上浮及轻微缩放等聚焦动画效果，提升输入框交互体验。
当用户点击或使用Tab键进入输入框时，给一个平滑的视觉反馈能提升用户体验。通过CSS的:focus伪类结合过渡（transition）和变换（transform）等属性，可以轻松实现聚焦动画效果。
1. 基础聚焦边框动画
最常见的方式是改变输入框的边框颜色，并添加一点外发光效果：
input { padding: 10px; border: 2px solid #ccc; border-radius: 4px; outline: none; /* 移除默认轮廓 */ transition: all 0.3s ease;}input:focus {border-color: #007bff;box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);}
说明：使用 transition 让边框和阴影变化更柔和。box-shadow 提供视觉高亮，增强聚焦感。
2. 下划线伸展动画
适合简约风格表单，只对底部边框做动画处理：
立即学习“前端免费学习笔记（深入）”；
input { padding: 8px 0; font-size: 16px; border: none; border-bottom: 2px solid #ddd; outline: none; transition: border-color 0.3s ease;}input:focus {border-bottom-color: #007bff;}
进阶：从中间向两边伸展下划线
input { position: relative; padding: 8px 0; border: none; border-bottom: 2px solid #ddd; outline: none;}input::after {content: '';position: absolute;bottom: -2px;left: 50%;width: 0;height: 2px;background-color: #007bff;transition: width 0.3s ease, left 0.3s ease;}
input:focus::after {width: 100%;left: 0;}
通过伪元素实现线条从中向两侧展开的动效，视觉更具吸引力。
闪念贝壳
闪念贝壳是一款AI 驱动的智能语音笔记，随时随地用语音记录你的每一个想法。
218 查看详情
3. 标签上浮动画（配合placeholder）
常用于Material Design风格，输入时提示文字上移并变小：
.form-group { position: relative; margin-bottom: 20px;}label {position: absolute;left: 10px;top: 10px;font-size: 16px;color: #666;transition: all 0.3s ease;pointer-events: none;}
input:focus + label,input:not(:placeholder-shown) + label {top: -10px;font-size: 12px;color: #007bff;}
HTML结构示例：
注意：要让:not(:placeholder-shown)生效，placeholder必须设为空格或实际提示内容。
4. 添加轻微缩放动画
让输入框在聚焦时微微放大，突出当前操作区域：
input { padding: 10px; border: 2px solid #ccc; border-radius: 4px; outline: none; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);}input:focus {border-color: #007bff;transform: scale(1.02);z-index: 1;}
建议：缩放比例不要太大，1.02~1.05之间比较自然，避免页面跳动。
基本上就这些。选择合适的方式取决于你的设计风格。重点是保持动画流畅、响应及时，不干扰用户输入。合理运用transition和伪类，就能做出专业又细腻的聚焦效果。
以上就是如何用css实现表单输入框聚焦动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1008190.html
微信扫一扫 
支付宝扫一扫 
