twitter-bootstrap – bootstrap进度条没有动画

发布时间：2020-12-18 00:22:33 所属栏目：安全来源：网络整理

导读：我使用 ruby gem为我的Rails 4应用程序安装了bootstrap. 我已经将动画进度条的代码从bootstraps docs直接复制并粘贴到我的页面中： div class="progress progress-striped active" div class="progress-bar" role="progressbar" aria-valuenow="45" aria-val

我使用 ruby gem为我的Rails 4应用程序安装了bootstrap.

我已经将动画进度条的代码从bootstraps docs直接复制并粘贴到我的页面中：

<div class="progress progress-striped active">
   <div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
      <span class="sr-only">45% Complete</span>
   </div>
</div>

但酒吧不是动画.我唯一能想到的是我在sass变量中更改了条形图的颜色.

为什么不动画？

编辑

我的酒吧看起来像什么：

编辑

这是我使用活动类时应用的CSS：

解决方法

只是半透明的白色条纹(rgba(255,255,.15))没有出现在某些颜色上.

将Chrome浏览器的黄色显示为黄色.如果我们在Photoshop中使用该颜色,然后在其上放置.15不透明度的白色条纹,则不可见.我把轮廓放在这里,这样你就可以看到条纹的位置了.

因此,对于某些颜色,您可能需要调整条纹颜色的alpha.我在.progress-bar中添加了一个.progress-bar-primary类,与你添加.progress-bar-warning等的方式类似.

<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-primary"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

然后为.progress-bar-primary,只需根据自己的喜好更改条纹的alpha.对于Chrome Yellow,我使用了0.75不透明度.

.progress-bar-primary {
  background-color: yellow;
}

.progress-striped .progress-bar-primary {
  background-image: linear-gradient(45deg,rgba(255,.75)   25%,transparent 25%,transparent 50%,.75) 50%,.75) 75%,transparent 75%,transparent);
}

Demo Here

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!