Bootstrap怎么修改Progress进度条的条纹移动方向-Bootstrap教程-PHP中文网

条纹动画方向卡住需同步修改@keyframes和background-image方向：垂直滚动须用to bottom搭配纵向background-position及!important；水平反向应改animation-direction而非重写关键帧；transform旋转仅为视觉欺骗，非真正垂直动画。

bootstrap怎么修改progress进度条的条纹移动方向

条纹动画方向卡住不动？必须同步改`@keyframes`和`background-image`方向

Bootstrap 的条纹动画默认只沿 X 轴移动，哪怕你把background-image: linear-gradient()改成to bottom，条纹也不会垂直滚动——因为原生@keyframes animate-progress里写的仍是background-position: 1rem 0, 0 0，位移只动横轴。

要让条纹真正垂直动，两处必须一致：

background-image用to bottom或to top
@keyframes里background-position用纵向变化，比如0 100%, 0 0 → 0 0, 0 -100%
加!important确保覆盖 Bootstrap 原生关键帧（5.3+ 仍有优先级冲突）
background-size保持原值（如1rem 1rem），否则条纹拉伸或断裂

怎么写垂直向上滚动的条纹动画？

目标是条纹从下往上“涌”，不是旋转容器。直接覆盖即可：

@keyframes animate-progress {
  0% { background-position: 0 100%, 0 0 !important; }
  100% { background-position: 0 0, 0 -100% !important; }
}
.progress-bar-striped {
  background-image: linear-gradient(to bottom, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}

注意：to bottom + 纵向background-position才是有效组合；漏掉!important，原生关键帧仍会生效。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

想让条纹从左往右动？别碰`@keyframes`，用`animation-direction`

Bootstrap 默认是从右往左扫（to right渐变 + X 轴负向位移）。要反向，最安全的做法是控制播放方向：

给.progress-bar-animated加animation-direction: reverse
确保这条 CSS 加载在 Bootstrap CSS 之后，且优先级足够（必要时加!important）
不要同时改@keyframes和animation-direction，容易互相抵消
错误写法：animation: progress-bar-stripes 1s linear infinite reverse——Bootstrap 原生规则没定义reverse，这行会被忽略