Chinaunix首页 | 论坛 | 博客

chunzhisu的ChinaUnix博客

首页　| 　博文目录　| 　关于我

chunzhisu

  • 博客访问： 76675
  • 博文数量： 73
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 740
  • 用 户 组： 普通用户
  • 注册时间： 2014-07-04 16:50
文章分类

全部博文（73）

文章存档

2014年（73）

我的朋友
最近访客
推荐博文
CSS3实现进度条代码

分类： Html/Css

2014-08-16 10:36:56

  • CSS3实现进度条代码，演示不同百分比时候的进度条状态，无刷新改变进度条的长度，兼容主流浏览器，欢迎下载。

点击(此处)折叠或打开

  1. <!DOCTYPE html>

  3. <html>
  4. <head>
  5. <meta charset="UTF-8" />
  6.     <title></title>
  7.     <style>
  8.         body {
  9.              
  10.     font: 13px 'trebuchet MS',Arial,Helvetica;
  11.         }
  12.     
  13.         h2, p {
  14.             text-align: center;
  15.             color: #fafafa;
  16.             text-shadow: 0 1px 0 #111;    
  17.         }
  18.         
  19.         a {
  20.             color: #777;
  21.         }

  23.         .progress-bar {
  24.             background-color: #1a1a1a;
  25.             height: 25px;
  26.             padding: 5px;
  27.             width: 350px;
  28.             margin: 70px 0 20px 0;            
  29.             -moz-border-radius: 5px;
  30. -webkit-border-radius: 5px;
  31. border-radius: 5px;
  32.             -moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
  33.             -webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
  34.             box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
  35.         }
  36.         
  37.         .progress-bar span {
  38.             display: inline-block;
  39.             height: 100%;
  40.             background-color: #777;
  41.             -moz-border-radius: 3px;
  42.             -webkit-border-radius: 3px;
  43.             border-radius: 3px;
  44.             -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
  45.             -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
  46.             box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
  47.             -webkit-transition: width .4s ease-in-out;
  48.             -moz-transition: width .4s ease-in-out;
  49.             -ms-transition: width .4s ease-in-out;
  50.             -o-transition: width .4s ease-in-out;
  51.             transition: width .4s ease-in-out;        
  52.         }
  53.         
  54.         /*---------------------------*/            
  55.         
  56.         .blue span {
  57.             background-color: #34c2e3;
  58.         }

  60.         .orange span {
  61.              background-color: #fecf23;
  62.              background-image: -webkit-gradient(linear, left top, left bottom, from(#fecf23), to(#fd9215));
  63.              background-image: -webkit-linear-gradient(top, #fecf23, #fd9215);
  64.              background-image: -moz-linear-gradient(top, #fecf23, #fd9215);
  65.              background-image: -ms-linear-gradient(top, #fecf23, #fd9215);
  66.              background-image: -o-linear-gradient(top, #fecf23, #fd9215);
  67.              background-image: linear-gradient(top, #fecf23, #fd9215);
  68.         }    

  70.         .green span {
  71.              background-color: #a5df41;
  72.              background-image: -webkit-gradient(linear, left top, left bottom, from(#a5df41), to(#4ca916));
  73.              background-image: -webkit-linear-gradient(top, #a5df41, #4ca916);
  74.              background-image: -moz-linear-gradient(top, #a5df41, #4ca916);
  75.              background-image: -ms-linear-gradient(top, #a5df41, #4ca916);
  76.              background-image: -o-linear-gradient(top, #a5df41, #4ca916);
  77.              background-image: linear-gradient(top, #a5df41, #4ca916);
  78.         }        
  79.         
  80.         /*---------------------------*/        
  81.         
  82.         .stripes span {
  83.             -webkit-background-size: 30px 30px;
  84.             -moz-background-size: 30px 30px;
  85.             background-size: 30px 30px;            
  86.             background-image: -webkit-gradient(linear, left top, right bottom,
  87.                                 color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
  88.                                 color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
  89.                                 color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
  90.                                 to(transparent));
  91.             background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
  92.                                 transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
  93.                                 transparent 75%, transparent);
  94.             background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
  95.                                 transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
  96.                                 transparent 75%, transparent);
  97.             background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
  98.                                 transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
  99.                                 transparent 75%, transparent);
  100.             background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
  101.                                 transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
  102.                                 transparent 75%, transparent);
  103.             background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
  104.                                 transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
  105.                                 transparent 75%, transparent);
  106.             
  107.             -webkit-animation: animate-stripes 3s linear infinite;
  108.             -moz-animation: animate-stripes 3s linear infinite;         
  109.         }
  110.         
  111.         @-webkit-keyframes animate-stripes {
  112.             0% {background-position: 0 0;} 100% {background-position: 60px 0;}
  113.         }
  114.         
  115.         
  116.         @-moz-keyframes animate-stripes {
  117.             0% {background-position: 0 0;} 100% {background-position: 60px 0;}
  118.         }
  119.         
  120.         /*---------------------------*/    

  122.         .shine span {
  123.             position: relative;
  124.         }
  125.         
  126.         .shine span::after {
  127.             content: '';
  128.             opacity: 0;
  129.             position: absolute;
  130.             top: 0;
  131.             right: 0;
  132.             bottom: 0;
  133.             left: 0;
  134.             background: #fff;
  135.             -moz-border-radius: 3px;
  136.             -webkit-border-radius: 3px;
  137.             border-radius: 3px;            
  138.             
  139.             -webkit-animation: animate-shine 2s ease-out infinite;
  140.             -moz-animation: animate-shine 2s ease-out infinite;             
  141.         }

  143.         @-webkit-keyframes animate-shine {
  144.             0% {opacity: 0; width: 0;}
  145.             50% {opacity: .5;}
  146.             100% {opacity: 0; width: 95%;}
  147.         }
  148.         
  149.         
  150.         @-moz-keyframes animate-shine {
  151.             0% {opacity: 0; width: 0;}
  152.             50% {opacity: .5;}
  153.             100% {opacity: 0; width: 95%;}
  154.         }

  156.         /*---------------------------*/    
  157.         
  158.         .glow span {
  159.             -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
  160.             -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
  161.             box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
  162.             
  163.             -webkit-animation: animate-glow 1s ease-out infinite;
  164.             -moz-animation: animate-glow 1s ease-out infinite;             
  165.         }

  167.         @-webkit-keyframes animate-glow {
  168.          0% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
  169.          50% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;}
  170.          100% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
  171.          }

  173.         @-moz-keyframes animate-glow {
  174.          0% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
  175.          50% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;}
  176.          100% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
  177.          }
  178.     </style>
  179. </head>

  181. <body style='margin:100px 10px;'>
  182. <div style=" width:360px; margin:0 auto">
  183. <br><br>

  185. <h1>CSS3打造的进度条</h1>

  187. <div class="progress-bar blue stripes">
  188.     <span style="width: 40%"></span>
  189.   
  190. </div>
  191. <p>Set above to:
  192.     <a href="#" class="quarter">25%</a> /
  193.     <a href="#" class="half">50%</a> /
  194.     <a href="#" class="three-quarters">75%</a> /
  195.     <a href="#" class="full">100%</a>

  197. </p>

  199. <div class="progress-bar orange shine">
  200.     <span style="width: 65%"></span>
  201. </div>
  202. <p>Set above to:
  203.     <a href="#" class="quarter">25%</a> /
  204.     <a href="#" class="half">50%</a> /
  205.     <a href="#" class="three-quarters">75%</a> /
  206.     <a href="#" class="full">100%</a>

  208. </p>

  210. <div class="progress-bar green glow">
  211.     <span style="width: 55%"></span>
  212. </div>
  213. <p>Set above to:
  214.     <a href="#" class="quarter">25%</a> /
  215.     <a href="#" class="half">50%</a> /
  216.     <a href="#" class="three-quarters">75%</a> /
  217.     <a href="#" class="full">100%</a>

  219. </p>
  220. </div>
  221. <script src=""></script>
  222. <script>
  223.     $(document).ready(function(){
  224.         $('.quarter').click(function(){
  225.             $(this).parent().prev().children('span').css('width','25%');
  226.             });
  227.         $('.half').click(function(){
  228.             $(this).parent().prev().children('span').css('width','50%');
  229.             });
  230.         $('.three-quarters').click(function(){
  231.             $(this).parent().prev().children('span').css('width','75%');
  232.             });
  233.         $('.full').click(function(){
  234.             $(this).parent().prev().children('span').css('width','100%');
  235.             });            
  236.     });
  237. </script>
  238. </body>
  239. </html>


阅读(257) | 评论(0) | 转发(0) |
0

上一篇：CSS3模仿的圆角Js弹出框效果，图片盒子

下一篇：JavaScript扫描效果，请使用火狐浏览

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6