bootstrap 滚动 进度条_进度条--动态条纹进度条

使用方法：

在进度条“progress progress-striped”两个类的基础上再加入“active”类名。如下代码：

实现原理：

为了让条纹进度条动起来，Bootstrap框架还提供了一种动态条纹进度条。其实现原理主要通过CSS3的animation来完成。首先通过@keyframes创建了一个progress-bar-stripes的动画，这个动画主要做了一件事，就是改变背景图像的位置，也就是background-position的值。因为条纹进度条是通过CSS3的线性渐变来制作的，而linear-gradient实现的正是对应背景中的背景图片。

/*bootstrap.css文件第4500行～第4515行*/

@-webkit-keyframes progress-bar-stripes {

from {

background-position: 40px 0;

}

to {

background-position: 0 0;

}

}

@keyframes progress-bar-stripes {

from {

background-position: 40px 0;

}

to {

background-position: 0 0;

}

}

了解CSS3的同学都知道，@keyframes仅仅是创建了一个动画效果，如果要让进度条真正的动起来，我们需要通过一定的方式调用@keyframes创建的动画“progres