css3静态进度条,CSS3+jQuery Progress Bars(CSS3进度条)

主要运动到的css3属性有：border-radius(设置圆角)、box-shadow(阴影)、transition(过渡效果)。

body,div,p{ margin:0; padding:0;}

body{

font:13px Tahoma,Arial,sans-serif;

background: #222 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAFVBMVEUqKiopKSkoKCgjIyMuLi4kJCQtLS0dJckpAAAAO0lEQVR42iXLAQoAUQhCQSvr/kfe910jHIikElsl5qVFa1iE5f0Pom/CNZdbNM6756lQ41NInMfuFPgAHVEAlGk4lvIAAAAASUVORK5CYII=");

}

p{

color:#FAFAFA;

text-align:center;

text-shadow: 0 1px 0 #111;

}

a{

color:#777;

}

a:hover{

color:#FFF;

}

.progress-bar{

background-color:#1a1a1a;

width:350px; height:25px;

padding:5px; margin:80px auto 35px auto;

border-radius:5px;/*设置圆角*/

-moz-border-radius:5px;/

-webkit-border-radius:5px;/

border-radius:5px;

box-shadow:0 1px 5px #000 inset,0 1px 0 #444;/*设置阴影 inset内侧阴影*/

-moz-box-shadow:0 1px 5px #000 inset,0 1px 0 #444;/

-webkit-box-shadow:0 1px 5px #000 inset,0 1px 0 #444;/

box-shadow:0 1px 5px #000 inset,0 1px 0 #444;

}

.progress-bar span{

background-color:#999;

display:inline-block;

height:100%;

border-radius:3px;

-moz-border-radius:3px;

-webkit-border-radius:3px;

border-radius:3px;

box-shadow:0 1px 0 rgba(255,255,255,.5) inset;

-moz-box-shadow:0 1px 0 rgba(255,255,255,.5) inset;

-webkit-box-shadow:0 1px 0 rgba(255,255,255,.5) inset;

box-shadow:0 1px 0 rgba(255,255,255,.5) inset;

transition:width .4s ease-in-out;/*设置过渡效果*/

-moz-transition:width .4s ease-in-out;

-webkit-transition:width .4s ease-in-out;

transition:width .4s ease-in-out;

}

/*

语法：

transition:[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]

注释：

transition:[ 检索或设置对象中的参与过渡的属性 ] || [ 指定对象过渡的持续时间 ] || [ 检索或设置对象中过渡的动画类型 ] || [ 指定对象过渡的延迟时间 ]

编写方法：

transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;

拆分方法：

transition-property:border-color, background-color, color;

transition-duration:.5s, .5s, .5s;

transition-timing-function:ease-in, ease-in, ease-in;

transition-delay:.1s, .1s, .1s;

*/

/* Case 1 */

.blue span{

background-color:#34c2e3;

}

.stripes span{

background-size:30px 30px;

background-image:linear-gradient(135deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);/*用线性渐变创建图像*/

background-image:-moz-linear-gradient(135deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);

background-image:-webkit-linear-gradient(135deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);

animation:animate-stripes 3s linear infinite;

-moz-animation:animate-stripes 3s linear infinite;

-webkit-animation:animate-stripes 3s linear infinite;

}

/*

语法：

:linear-gradient([ ,]? [, ]+);

:[ left | right ]? [ top | bottom ]? || ?

: [ | ]?

left:设置左边为渐变起点的横坐标值。

right:设置右边为渐变起点的横坐标值。

top:设置顶部为渐变起点的纵坐标值。

bottom:设置底部为渐变起点的纵坐标值。

:用角度值指定渐变的方向(或角度)。

:指定渐变的起止颜色。

:指定颜色。请参阅颜色值

:用长度值指定起止色位置。不允许负值

:用百分比指定起止色位置。

例句：

background-image:linear-gradient(,[],[]);

*/

@keyframes animate-stripes{

0%{ background-position:0,0;}

100%{ background-position:60px,0;}

}

@-moz-keyframes animate-stripes{

0%{ background-position:0,0;}

100%{ background-position:60px,0;}

}

@-webkit-keyframes animate-stripes{

0%{ background-position:0,0;}

100%{ background-position:60px,0;}

}

/* Case 2 */

.shine span{

position:relative;

background:linear-gradient(#FECF23, #FD9215);

background:-moz-linear-gradient(#FECF23, #FD9215);

background:-webkit-linear-gradient(#FECF23, #FD9215);

}

.shine span::after {

content:'';

opacity:0;

position:absolute;

top:0; right:0; bottom:0; left:0;

background:#fff;

border-radius:3px;

-moz-border-radius:3px;

-webkit-border-radius:3px;

border-radius:3px;

animation:animate-shine 2s ease-out infinite;

-moz-animation:animate-shine 2s ease-out infinite;

-webkit-animation:animate-shine 2s ease-out infinite;

}

@keyframes animate-shine{

0%{ opacity:0; width:0;}

50%{ opacity:.5;}

100%{ opacity:0; width:95%;}

}

@-moz-keyframes animate-shine{

0%{ opacity:0; width:0;}

50%{ opacity:.5;}

100%{ opacity:0; width:95%;}

}

@-webkit-keyframes animate-shine{

0%{ opacity:0; width:0;}

50%{ opacity:.5;}

100%{ opacity:0; width:95%;}

}

请大家使用现代浏览器访问： Firefox 5+, Chrome 6+, Safari 5+