引导进度条厚度超过 40px答案

【问题标题】：bootstrap progressbar thickness over 40px引导进度条厚度超过 40px
【发布时间】：2014-09-21 14:08:10
【问题描述】：

我想将引导程序的进度条用作精美的路障胶带。效果很好，我也想让酒吧更厚。所以我将活动进度条的背景大小从 40px 更改为 60：

div.progress.active .progress-bar {
    background-size: 60px 60px;
}

到目前为止，条形图变粗了，但动画不再正确循环。

我需要改变什么以使循环在 60 像素而不是 40 像素之后发生？

自己看看：http://jsfiddle.net/ok94vqoa/1/

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3 progress-bar css-animations

【解决方案1】：

您还需要将 progress-bar-stripes 动画的关键帧更新为 60 像素。

jsFiddle

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 60px 0;
  }
  to {
    background-position: 0 0;
  }
}
@-o-keyframes progress-bar-stripes {
  from {
    background-position: 60px 0;
  }
  to {
    background-position: 0 0;
  }
}
@keyframes progress-bar-stripes {
  from {
    background-position: 60px 0;
  }
  to {
    background-position: 0 0;
  }
}

【讨论】：