聚焦渐变动画制作教程

本文详解如何用纯CSS实现输入框聚焦时的平滑渐变动画效果，通过巧妙结合`:focus`伪类与`transition`属性（推荐0.3秒ease缓动），轻松完成边框颜色变化，并可选添加`box-shadow`增强视觉层次；同时提醒关键细节——如务必移除默认`outline`、合理选择过渡属性与贝塞尔曲线以提升交互自然感，让看似简单的动效真正兼顾美观性与用户体验。

当用户点击输入框时，我们希望边框颜色平滑过渡，形成一个聚焦渐变动画。这可以通过 CSS 的 transition 属性轻松实现，配合 :focus 伪类来触发状态变化。

基础结构：HTML 输入框

先写一个简单的输入框结构：

<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>/
}</p>

这里 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 和选择合适的过渡时间。

以上就是《聚焦渐变动画制作教程》的详细内容，更多关于的资料请关注golang学习网公众号！