CSS3实现动态进度条

截图.jpg

查看demo

结构

    

        
Graphic Design
        
html//css
        
jQuery // MoTools
        
Wordpress
    

样式

body {
    background: #E9E5E2;
}
#skill {
    list-style: none;
    font-size: 12px;
    width: 296px;
    margin: 50px auto 0;
    padding: 30px 0;
    position: relative;
    line-height: 2em;
}
#skill li {
    margin-bottom: 50px;
    background: #e9e5e2;

    background-image: -webkit-gradient(linear,left top,left bottom,from(#e1ddd9), to(#e9e5e2));
 background-image: -webkit-linear-gradient(top,#e1ddd9,#e9e5e2);
    background-image: -moz-linear-gradient(top,#e1ddd9,#e9e5e2);
    background-image: -ms-linear-gradient(top,#e1ddd9,#e9e5e2);
    background-image: -o-linear-gradient(top,#e1ddd9,#e9e5e2);
    background-image: linear-gradient(top,#e1ddd9,#e9e5e2);

    height: 20px;
    border-radius: 10px;    /*--背景槽的圆角--*/

    -webkit-box-shadow: 0 1px 0 #bebbb9 inset, 0 1px 0 #fcfcfc;
    box-shadow: 0 1px 0 #bebbb9 inset, 0 1px 0 #fcfcfc;
}
#skill li h3 {
    position: relative;
    top: -25px;
}   ／*--标题文字上移--*／

首先设置整体页面的背景色，background-image设置进度条的背景槽，添加box-shadow制作凹进去的效果。

/*--四条进度条的统一样式--*/
.bar {
    height: 18px;
    margin: 1px 2px;
    position: absolute;
    border-radius: 9px;
    -webkit-box-shadow:0 1px 0 #fcfcfc inset, 0 1px 0 #bebbb9;
    box-shadow:0 1px 0 #fcfcfc inset, 0 1px 0 #bebbb9;
}    
/*--单独设置进度条的样式--*/
.graphic-design {
    width: 100%;
    -webkit-animation: graphic-design 2s ease-in-out;
    background-color: #f674a4;
    background-image: -webkit-gradient( linear, left top, left bottom, from(#f674a4), to(#e06995));
    background-image: -webkit-linear-gradient(top, #f674a4, #e06995);
    background-image: -moz-linear-gradient(top, #f674a4, #e06995);
    background-image: -ms-linear-gradient(top, #f674a4, #e06995);
    background-image: -o-linear-gradient(top, #f674a4, #e06995);
    background-image: linear-gradient(top, #f674a4, #e06995);
}
.html-css {
     width: 90%;
    -webkit-animation: html-css 2s ease-in-out;
    background-color: #0674a4;
    background-image: -webkit-gradient( linear, left top, left bottom, from(#f674a4), to(#e06995));
    background-image: -webkit-linear-gradient(top, #0674a4, #006995);
    background-image: -moz-linear-gradient(top, #0674a4, #006995);
    background-image: -ms-linear-gradient(top, #0674a4, #006995);
    background-image: -o-linear-gradient(top, #0674a4, #006995);
    background-image: linear-gradient(top, #0674a4, #006995);
}
.jQuery {
     width: 65%;
    -webkit-animation: jQuery 2s ease-in-out;
    background-color: #06f4a4;
    background-image: -webkit-gradient( linear, left top, left bottom, from(#f674a4), to(#e06995));
    background-image: -webkit-linear-gradient(top, #06f4a4, #00f995);
    background-image: -moz-linear-gradient(top, #06f4a4, #00f995);
    background-image: -ms-linear-gradient(top, #06f4a4, #00f995);
    background-image: -o-linear-gradient(top, #06f4a4, #00f995);
    background-image: linear-gradient(top, #06f4a4, #00f995);
}
.Wordpress {
     width: 80%;
    -webkit-animation: Wordpress 2s ease-in-out;
    background-color: #06f4ff;
    background-image: -webkit-gradient( linear, left top, left bottom, from(#f674a4), to(#e06995));
    background-image: -webkit-linear-gradient(top, #06f4ff, #00f9ff);
    background-image: -moz-linear-gradient(top, #06f4ff, #00f9ff);
    background-image: -ms-linear-gradient(top, #06f4ff, #00f9ff);
    background-image: -o-linear-gradient(top, #06f4ff, #00f9ff);
    background-image: linear-gradient(top, #06f4ff, #00f9ff);
}
/*--设置每条进度条的关键帧动画--*/
@-webkit-keyframes graphic-design {
    0% {width:0;}
    100%{width:100%;}
}
@-webkit-keyframes html-css {
    0% {width:0;}
    100%{width:90%;}
}
@-webkit-keyframes jQuery {
    0% {width:0;}
    100%{width:65%;}
}
@-webkit-keyframes Wordpress {
    0% {width:0;}
    100%{width:80%;}
}

设置进度条的颜色，长度，和动画。

[参考来源]http://cssdeck.com/labs/ulfavgdi