通过CSS的transition属性与:focus伪类结合，可实现输入框聚焦时边框颜色平滑过渡的动画效果，首先设置输入框默认样式并去除outline，再定义:focus状态下的border-color变化，配合box-shadow可增强视觉表现，推荐使用0.3秒ease过渡以提升用户体验。
当用户点击输入框时，我们希望边框颜色平滑过渡，形成一个聚焦渐变动画。这可以通过 CSS 的 transition 属性轻松实现，配合 :focus 伪类来触发状态变化。
基础结构：HTML 输入框
先写一个简单的输入框结构：
设置默认样式与聚焦状态
给输入框设置基本样式，并定义聚焦时的边框颜色变化：
.input-field { padding: 10px; border: 2px solid #ccc; border-radius: 4px; outline: none; /* 去除默认聚焦轮廓 */ transition: border-color 0.3s ease; /* 关键：添加过渡效果 */}.input-field:focus {border-color: #007bff; / 聚焦时变为蓝色 /}
这里 transition: border-color 0.3s ease 表示边框颜色在 0.3 秒内以缓动方式变化。
立即学习“前端免费学习笔记（深入）”；
增强视觉效果（可选）
你可以进一步提升动画质感，比如加入阴影或改变外轮廓：
Pic Copilot
AI时代的顶级电商设计师，轻松打造爆款产品图片
158 查看详情 
.input-field:focus { border-color: #007bff; box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);}
这样在边框变色的同时，还会出现柔和的发光效果，提升用户体验。
支持多种渐变风格
如果你想要更丰富的色彩过渡，比如从灰色到绿色再到蓝色，可以使用 border-image 配合渐变，但需注意兼容性。简单起见，多数场景推荐使用纯色过渡。
也可以同时过渡多个属性：
.input-field { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
使用 cubic-bezier 可自定义动画节奏，让效果更自然。
基本上就这些。只要设置好初始和聚焦状态的样式，再用 transition 连接，就能实现流畅的输入框聚焦动画。不复杂但容易忽略细节，比如去掉 outline 和选择合适的过渡时间。
以上就是如何通过css transition制作输入框聚焦渐变动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1047837.html
微信扫一扫 
支付宝扫一扫 
