51可用代码模板网站

咨询热线:

181-1164-6936
  • 1
CSS样式
当前位置:首页>实用代码>CSS样式>

css3进度条效果

时间:2017-08-15 10:17点击:

代码如下



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


51可用模板(代码)网站专为广大站长朋友提供精品模板与代码,同时免费提供网站收录。
本站域名: WWW.51KYDM.COM    联系方式:QQ:182468923    手机:18111646936
本站关键词:网站链接收录网址收录入口网站免费提交收录网站收录提交入口    网站地图
51可用模板
展开