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

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



点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset=\"UTF-8\">
  5. <title>css3制作立体效果不可反向的进度条</title>
  6. <style>
  7.         .meter {
  8.             height: 20px;
  9.             position: relative;
  10.             margin: 60px 0 20px 0;
  11.             background: #555;
  12.             -moz-border-radius: 25px;
  13.             -webkit-border-radius: 25px;
  14.             border-radius: 25px;
  15.             padding: 10px;
  16.             -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
  17.             -moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
  18.             box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
  19.         }
  20.         .meter > span {
  21.             display: block;
  22.             height: 100%;
  23.             border-radius: 20px;
  24.             background-color: rgb(43,194,83);
  25.             background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(43,194,83)),color-stop(1, rgb(84,240,84)));
  26.             background-image: -moz-linear-gradient(center bottom,rgb(43,194,83) 37%,rgb(84,240,84) 69%);
  27.             box-shadow:
  28.              inset 0 2px 9px rgba(255,255,255,0.3),
  29.              inset 0 -2px 6px rgba(0,0,0,0.4);
  30.             position: relative;
  31.             overflow: hidden;
  32.             -webkit-animation: move .6s linear;
  33.         }
  34.         @-webkit-keyframes move {
  35.          0% {width:0;}
  36.          100% {width:100%;}
  37.         }
  38.     </style>
  39. </head>
  40. <body>
  41.     <div id=\"page-wrap\">
  42.         <div class=\"meter\">
  43.             <span style=\"width: 100%\"></span>
  44.         </div>
  45.     </div>
  46. </body>
  47. </html>

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/29737856/viewspace-1214529/,如需转载,请注明出处,否则将追究法律责任。

转载于:http://blog.itpub.net/29737856/viewspace-1214529/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值