HTML进度条交互：点击按钮后逐步填充背景色的视觉设计-html教程-PHP中文网

background-color 动画不生效是因为 css 无法对 linear-gradient 等复合背景做插值，应改用 width + overflow 配合子元素实现平滑填充，避免直接 transition background-color。

html进度条交互：点击按钮后逐步填充背景色的视觉设计

点击按钮触发进度条填充，为什么 background-color 动画不生效

直接用 transition 对 background-color 做动画，但点击后颜色“跳变”而非渐变，是因为 CSS 无法对渐变色（linear-gradient）或复合背景做插值动画。哪怕你只改了其中一色 stops，浏览器也当它是不可动画属性。

真正可动画的是 background-size（控制渐变显示范围）或 width（用块元素遮罩）
推荐方案：用一个子元素（如 <span></span>）作为填充层，通过 width + transition 控制伸展
避免写 background: linear-gradient(...); transition: background-color 0.3s —— 这行代码完全无效

用 width + overflow 实现平滑填充的最小可行结构

别套复杂框架，原生 HTML/CSS 就够。关键是父容器设 overflow: hidden，子元素从 width: 0% 开始过渡到目标值。

<div class="progress-bar">
  <span class="fill"></span>
</div>
<button id="startBtn">开始</button>

对应 CSS：

.progress-bar {
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}
.fill {
  display: block;
  height: 100%;
  width: 0%;
  background: #4caf50;
  transition: width 0.4s ease-out;
}

JS 只需一行修改：document.querySelector('.fill').style.width = '75%';