首页 > 代码库 > css3进度条

css3进度条

2024-09-18 09:24:27   220人阅读

<!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><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
<div id="page-wrap">
<div class="meter">
<span style="width: 45%"></span>
</div>
</div>
</body>
</html>

css3进度条


联系
我们