css3进度条
摘要：css3不可反向的进度条，超形象有立体感觉的进度条，而且修饰成了圆角，看上去挺漂亮，CSS3代码，欢迎参考。
html5代码
运行代码
<!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:45%;}
}
</style>
</head>
<body>
<div>http://www.webkfa.com/</div>
<div id="page-wrap">
<div class="meter">
<span style="width: 45%"></span>
</div>
</div>
</body>
</html>
相关文章
最新发布
阅读排行
热门文章
猜你喜欢