如何使用CSS3制作一个简单的进度条

html-css06

如何使用CSS3制作一个简单的进度条,第1张

如果不考虑IE的话，用css3应该不难：1、边框用背景图或纯色都可以，配合圆角和阴影；2、里面的进度条可以用垂直方向的线性渐变及阴影配合实现；3、最后配合js动态修改里面进度条div的宽度和文字的显示即可。

条纹进度条

若要制作一个条纹进度条，我们应该把.bar-fill重新命名为.bar-fill-stripes。我们将使用backgrou-image属性里的 linear-gradient同时声明它的颜色。剩余的CSS3动画效果也是和上述相同，看下面的代码：

.bar-fill-stripes {

height:15px

display:block

background:#e74c3c

width:0

border-radius:8px

background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent)

-webkit-transition:width .8s ease

-moz-transition:width .8s ease

transition:width .8s ease

-webkit-animation:progressbar 7s infinite

animation:progressbar 7s infinite

}