通过CSS的transition属性与:focus伪类结合，可实现输入框聚焦时边框颜色平滑过渡的动画效果，首先设置输入框默认样式并去除outline，再定义:focus状态下的border-color变化，配合box-shadow可增强视觉表现，推荐使用0.3秒ease过渡以提升用户体验。
当用户点击输入框时，我们希望边框颜色平滑过渡，形成一个聚焦渐变动画。这可以通过 CSS 的 transition 属性轻松实现，配合 :focus 伪类来触发状态变化。
先写一个简单的输入框结构：
<input type="text" class="input-field" placeholder="点击我试试">
给输入框设置基本样式，并定义聚焦时的边框颜色变化：
.input-field {
padding: 10px;
border: 2px solid #ccc;
border-radius: 4px;
outline: none; /* 去除默认聚焦轮廓 */
transition: border-color 0.3s ease; /* 关键：添加过渡效果 */
}
<p>.input-field:focus {
border-color: #007bff; /<em> 聚焦时变为蓝色 </em>/
}这里 transition: border-color 0.3s ease 表示边框颜色在 0.3 秒内以缓动方式变化。
立即学习“前端免费学习笔记（深入）”；
你可以进一步提升动画质感，比如加入阴影或改变外轮廓：
.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制作输入框聚焦渐变动画的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
744
收藏
