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+