html如何设置动态进度条,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%;}

}

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