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博客 ” ,链接:http://blog.itpub.net/29737856/viewspace-1214529/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/29737856/viewspace-1214529/