怎样在Bootstrap4进度条中用CSS实现炫彩渐变流动动画？-css教程-PHP中文网

必须用 background-image 替代 background-color 才能实现 Bootstrap 4 进度条的流动动画，因 CSS 动画无法驱动 background-color 位移；需配合 linear-gradient、background-size: 300% 100% 和 background-position 动画实现平滑滚动效果。

怎样在bootstrap4进度条中用css实现炫彩渐变流动动画？

用 `background-image` 替代 `background-color` 才能生效

Bootstrap 4 的进度条默认靠 background-color 控制颜色，但 CSS 动画无法直接驱动 background-color 实现“流动”效果——它只能做颜色切换，没法位移。真正要动起来，必须用 background-image 配合 linear-gradient + background-size + background-position 三件套。

常见错误是直接给 .progress-bar 加 animation: move 3s linear infinite 却没改背景类型，结果动画跑起来了，但条纹纹丝不动。

实操建议：

删掉所有 background-color 相关声明（包括 Bootstrap 默认的 bg-* 类）
用 background-image: linear-gradient(90deg, #ff6b6b, #4ecdc4, #44b5b1, #ff6b6b) 定义多色横向渐变
设 background-size: 300% 100% —— 宽度拉到 3 倍，才够后续位移空间
加 background-position: 0% 0% 作为动画起始点

`@keyframes` 里只动 `background-position` 的 X 轴

渐变“流动”的本质是让背景图横向滚动。如果 X 轴从 0% 移到 -100%，配合 background-size: 300% 100%，视觉上就是连续平滑的彩色带子往左滑。

别碰 Y 轴，也别写成 100% —— 那会导致跳帧或回弹。正确写法是：

@keyframes move {
  0% { background-position: 0% 0%; }
  100% { background-position: -100% 0%; }
}

注意：这个动画必须绑定在 .progress-bar 上，不能绑在外层 .progress；否则会被父容器裁剪或干扰定位。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

兼容性关键：加 `transform: translateZ(0)` 防卡顿

纯 background-position 动画在部分 Chrome/Firefox 版本中会掉帧，尤其进度条宽度变化频繁时（比如配合 JS 实时更新）。这不是 Bug，是浏览器对背景动画的硬件加速策略较弱。

解决方法简单粗暴：

给 .progress-bar 加 transform: translateZ(0) 或 will-change: background-position
二者选一即可，translateZ(0) 兼容性更好（IE11+ 都认）
不要同时加，避免触发多余重绘
如果用了 transition 控制进度变化（比如从 20% → 80%），记得把 transition 写在 .progress-bar 上，且避开 background-position —— 否则和动画冲突

动态进度 + 流动动画共存时，别用 `width` 写死

很多人把进度条写成

，再叠流动动画，结果动画只在 65% 区域内循环，看起来像一段短彩带原地抖动。正确做法是让动画区域始终铺满整个 .progress-bar 容器，进度靠 width 控制可见范围，动画靠背景独立跑：

确保 .progress-bar 的 height 和 line-height 一致（防文字偏移）
动画样式写在 .progress-bar::after 伪元素上更稳妥（避免和 width 冲突），但需设 content: "" + position: absolute + 满覆盖
更推荐方案：保留 width 控制进度，但把渐变动画写在 .progress-bar 本体，并用 overflow: hidden 在外层 .progress 上裁剪——这样动画永远全宽跑，显示多少只由 width 决定

最易被忽略的是：动画速度和进度更新频率无关。哪怕进度停在 30%，流动动画仍该匀速持续——这是“炫彩”感的来源。强行让动画随进度快慢变化，反而显得卡顿不专业。