截图.jpg
<a href='https://codepen.io/lip90/pen/WjLzMm/'>查看demo</a>
<html>结构
<body>
<ul id="skill">
<li><span class="bar graphic-design"></span><h3>Graphic Design</h3></li>
<li><span class="bar html-css"></span><h3>html//css</h3></li>
<li><span class="bar jQuery"></span><h3>jQuery // MoTools</h3></li>
<li><span class="bar Wordpress"></span><h3>Wordpress</h3></li>
</ul>
</body>
<css>样式
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%;}
}
设置进度条的颜色，长度，和动画。
