如何为HTML进度条保留自身颜色并应用linear-gradient渐变

嘿，我看了你的进度条需求——想要保留原本的红色、蓝色基调，同时给它们加上线性渐变效果对吧？这事儿不难，咱们只需要针对两个进度条的专属类，替换掉原来的单一背景色，换成对应色系的线性渐变就可以了，完全不影响原有动画和布局逻辑。

具体修改步骤： #

• 针对红色进度条：给.progress-bar-red类设置红色系的线性渐变，方向和进度条填充方向一致（从左到右），视觉上更自然。
• 针对蓝色进度条：同理给.progress-bar-blue类设置蓝色系的线性渐变，从亮蓝到深蓝过渡。
• 移除或覆盖原来.progress-bar里的单一绿色背景色，让专属类的渐变生效。

修改后的关键CSS代码： #

.progress-bar {
  height: 100%;
  width: 0;
  transition: width 1s ease-in-out;
  /* 移除原来的单一绿色背景，让专属类的渐变生效 */
}

.progress-bar-red {
  /* 红色系线性渐变，从左到右 */
  background: linear-gradient(to right, rgb(255, 70, 70), rgb(220, 30, 30));
}

.progress-bar-blue {
  /* 蓝色系线性渐变，从左到右 */
  background: linear-gradient(to right, rgb(70, 130, 255), rgb(30, 90, 220));
}

额外优化建议： #

如果你想要更丰富的渐变效果，还可以调整渐变的颜色节点，比如加入中间色：

.progress-bar-red {
  background: linear-gradient(to right, #ff4646, #ff6b6b, #e63946);
}

或者调整渐变方向，比如to bottom（从上到下），不过to right和进度条的填充方向匹配，视觉协调度更高。

这样修改后，两个进度条会分别保留红色、蓝色的主题色，同时拥有平滑的渐变效果，完全符合你的需求~

内容的提问来源于stack exchange，提问作者jose1221