　　css3不可反向的进度条，超形象有立体感觉的进度条，而且修饰成了圆角，看上去挺漂亮，CSS3代码，欢迎参考。

点击(此处)折叠或打开

<!DOCTYPE html>
<html>
<head>
<meta charset=\"UTF-8\">
<title>css3制作立体效果不可反向的进度条</title>
<style>
.meter {
height: 20px;
position: relative;
margin: 60px 0 20px 0;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
-moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
display: block;
height: 100%;
border-radius: 20px;
background-color: rgb(43,194,83);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(43,194,83)),color-stop(1, rgb(84,240,84)));
background-image: -moz-linear-gradient(center bottom,rgb(43,194,83) 37%,rgb(84,240,84) 69%);
box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
-webkit-animation: move .6s linear;
}
@-webkit-keyframes move {
0% {width:0;}
100% {width:100%;}
}
</style>
</head>
<body>
<div id=\"page-wrap\">
<div class=\"meter\">
<span style=\"width: 100%\"></span>
</div>
</div>
</body>
</html>

ITPub博客

css3制作立体效果不可反向的进度条