{"id":139,"date":"2012-07-10T14:18:57","date_gmt":"2012-07-10T06:18:57","guid":{"rendered":"http:\/\/www.bluesdream.com\/blog\/?p=139"},"modified":"2012-11-26T12:00:05","modified_gmt":"2012-11-26T04:00:05","slug":"css3-jquery-progress-bars","status":"publish","type":"post","link":"https:\/\/www.bluesdream.com\/blog\/css3-jquery-progress-bars.html","title":{"rendered":"CSS3+jQuery Progress Bars(CSS3\u8fdb\u5ea6\u6761)"},"content":{"rendered":"<p>\u4e3b\u8981\u8fd0\u52a8\u5230\u7684css3\u5c5e\u6027\u6709\uff1aborder-radius(\u8bbe\u7f6e\u5706\u89d2)\u3001box-shadow(\u9634\u5f71)\u3001transition(\u8fc7\u6e21\u6548\u679c)\u3002<!--more--><\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\nbody,div,p{ margin:0; padding:0;}\r\nbody{\r\n\tfont:13px Tahoma,Arial,sans-serif;\r\n\tbackground: #222 url(&quot;data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAFVBMVEUqKiopKSkoKCgjIyMuLi4kJCQtLS0dJckpAAAAO0lEQVR42iXLAQoAUQhCQSvr\/kfe910jHIikElsl5qVFa1iE5f0Pom\/CNZdbNM6756lQ41NInMfuFPgAHVEAlGk4lvIAAAAASUVORK5CYII=&quot;);\r\n}\r\np{\r\n\tcolor:#FAFAFA;\r\n\ttext-align:center;\r\n\ttext-shadow: 0 1px 0 #111;\r\n}\r\na{\r\n\tcolor:#777;\r\n}\r\na:hover{\r\n\tcolor:#FFF;\r\n}\r\n\r\n.progress-bar{\r\n\tbackground-color:#1a1a1a;\r\n\twidth:350px; height:25px;\r\n\tpadding:5px; margin:80px auto 35px auto;\r\n\tborder-radius:5px;\/*\u8bbe\u7f6e\u5706\u89d2*\/\r\n\t-moz-border-radius:5px;\/\r\n\t-webkit-border-radius:5px;\/\r\n\tborder-radius:5px;\r\n\tbox-shadow:0 1px 5px #000 inset,0 1px 0 #444;\/*\u8bbe\u7f6e\u9634\u5f71 inset\u5185\u4fa7\u9634\u5f71*\/\r\n\t-moz-box-shadow:0 1px 5px #000 inset,0 1px 0 #444;\/\r\n\t-webkit-box-shadow:0 1px 5px #000 inset,0 1px 0 #444;\/\r\n\tbox-shadow:0 1px 5px #000 inset,0 1px 0 #444;\r\n}\r\n.progress-bar span{\r\n\tbackground-color:#999;\r\n\tdisplay:inline-block;\r\n\theight:100%;\r\n\tborder-radius:3px;\r\n\t-moz-border-radius:3px;\r\n\t-webkit-border-radius:3px;\r\n\tborder-radius:3px;\r\n\tbox-shadow:0 1px 0 rgba(255,255,255,.5) inset;\r\n\t-moz-box-shadow:0 1px 0 rgba(255,255,255,.5) inset;\r\n\t-webkit-box-shadow:0 1px 0 rgba(255,255,255,.5) inset;\r\n\tbox-shadow:0 1px 0 rgba(255,255,255,.5) inset;\r\n\ttransition:width .4s ease-in-out;\/*\u8bbe\u7f6e\u8fc7\u6e21\u6548\u679c*\/\r\n\t-moz-transition:width .4s ease-in-out;\r\n\t-webkit-transition:width .4s ease-in-out;\r\n\ttransition:width .4s ease-in-out;\r\n}\r\n\/*\r\n\u8bed\u6cd5\uff1a\r\ntransition:&#x5B; transition-property ] || &#x5B; transition-duration ] || &#x5B; transition-timing-function ] || &#x5B; transition-delay ]\r\n\r\n\u6ce8\u91ca\uff1a\r\ntransition:&#x5B; \u68c0\u7d22\u6216\u8bbe\u7f6e\u5bf9\u8c61\u4e2d\u7684\u53c2\u4e0e\u8fc7\u6e21\u7684\u5c5e\u6027 ] || &#x5B; \u6307\u5b9a\u5bf9\u8c61\u8fc7\u6e21\u7684\u6301\u7eed\u65f6\u95f4 ] || &#x5B; \u68c0\u7d22\u6216\u8bbe\u7f6e\u5bf9\u8c61\u4e2d\u8fc7\u6e21\u7684\u52a8\u753b\u7c7b\u578b ] || &#x5B; \u6307\u5b9a\u5bf9\u8c61\u8fc7\u6e21\u7684\u5ef6\u8fdf\u65f6\u95f4 ]\r\n\r\n\u7f16\u5199\u65b9\u6cd5\uff1a\r\ntransition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;\r\n\r\n\u62c6\u5206\u65b9\u6cd5\uff1a\r\ntransition-property:border-color, background-color, color;\r\ntransition-duration:.5s, .5s, .5s;\r\ntransition-timing-function:ease-in, ease-in, ease-in;\r\ntransition-delay:.1s, .1s, .1s;\r\n*\/\r\n\r\n\/* Case 1 *\/\r\n.blue span{\r\n\tbackground-color:#34c2e3;\r\n}\r\n\r\n.stripes span{\r\n\tbackground-size:30px 30px;\r\n\tbackground-image:linear-gradient(135deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);\/*\u7528\u7ebf\u6027\u6e10\u53d8\u521b\u5efa\u56fe\u50cf*\/\r\n\tbackground-image:-moz-linear-gradient(135deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);\r\n\tbackground-image:-webkit-linear-gradient(135deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);\r\n\tanimation:animate-stripes 3s linear infinite;\r\n\t-moz-animation:animate-stripes 3s linear infinite;\r\n\t-webkit-animation:animate-stripes 3s linear infinite;\r\n}\r\n\/*\r\n\u8bed\u6cd5\uff1a\r\n&lt;linear-gradient&gt;:linear-gradient(&#x5B; &lt;point&gt;,]? &lt;color-stop&gt;&#x5B;, &lt;color-stop&gt;]+);\r\n&lt;point&gt;:&#x5B; left | right ]? &#x5B; top | bottom ]? || &lt;angle&gt;?\r\n&lt;color-stop&gt;:&lt;color&gt; &#x5B; &lt;length&gt; | &lt;percentage&gt; ]?\r\n\r\n&lt;point&gt;\r\nleft:\u8bbe\u7f6e\u5de6\u8fb9\u4e3a\u6e10\u53d8\u8d77\u70b9\u7684\u6a2a\u5750\u6807\u503c\u3002\r\nright:\u8bbe\u7f6e\u53f3\u8fb9\u4e3a\u6e10\u53d8\u8d77\u70b9\u7684\u6a2a\u5750\u6807\u503c\u3002\r\ntop:\u8bbe\u7f6e\u9876\u90e8\u4e3a\u6e10\u53d8\u8d77\u70b9\u7684\u7eb5\u5750\u6807\u503c\u3002\r\nbottom:\u8bbe\u7f6e\u5e95\u90e8\u4e3a\u6e10\u53d8\u8d77\u70b9\u7684\u7eb5\u5750\u6807\u503c\u3002\r\n&lt;angle&gt;:\u7528\u89d2\u5ea6\u503c\u6307\u5b9a\u6e10\u53d8\u7684\u65b9\u5411\uff08\u6216\u89d2\u5ea6\uff09\u3002\r\n&lt;color-stop&gt;:\u6307\u5b9a\u6e10\u53d8\u7684\u8d77\u6b62\u989c\u8272\u3002\r\n\r\n&lt;color-stop&gt;\r\n&lt;color&gt;:\u6307\u5b9a\u989c\u8272\u3002\u8bf7\u53c2\u9605\u989c\u8272\u503c\r\n&lt;length&gt;:\u7528\u957f\u5ea6\u503c\u6307\u5b9a\u8d77\u6b62\u8272\u4f4d\u7f6e\u3002\u4e0d\u5141\u8bb8\u8d1f\u503c\r\n&lt;percentage&gt;:\u7528\u767e\u5206\u6bd4\u6307\u5b9a\u8d77\u6b62\u8272\u4f4d\u7f6e\u3002\r\n\r\n\u4f8b\u53e5\uff1a\r\nbackground-image:linear-gradient(&lt;angle&gt;,&#x5B;&lt;color-stop&gt; &lt;percentage&gt;],&#x5B;&lt;color-stop&gt; &lt;percentage&gt;]);\r\n*\/\r\n@keyframes animate-stripes{\r\n\t0%{ background-position:0,0;}\r\n\t100%{ background-position:60px,0;}\r\n}\r\n@-moz-keyframes animate-stripes{\r\n\t0%{ background-position:0,0;}\r\n\t100%{ background-position:60px,0;}\r\n}\r\n@-webkit-keyframes animate-stripes{\r\n\t0%{ background-position:0,0;}\r\n\t100%{ background-position:60px,0;}\r\n}\r\n\r\n\/* Case 2 *\/\r\n.shine span{\r\n\tposition:relative;\r\n\tbackground:linear-gradient(#FECF23, #FD9215);\r\n\tbackground:-moz-linear-gradient(#FECF23, #FD9215);\r\n\tbackground:-webkit-linear-gradient(#FECF23, #FD9215);\r\n}\r\n.shine span::after {\r\n\tcontent:'';\r\n\topacity:0;\r\n\tposition:absolute;\r\n\ttop:0; right:0; bottom:0; left:0;\r\n\tbackground:#fff;\r\n\tborder-radius:3px;\r\n\t-moz-border-radius:3px;\r\n\t-webkit-border-radius:3px;\r\n\tborder-radius:3px;\r\n\tanimation:animate-shine 2s ease-out infinite;\r\n\t-moz-animation:animate-shine 2s ease-out infinite;\r\n\t-webkit-animation:animate-shine 2s ease-out infinite;\r\n}\r\n@keyframes animate-shine{\r\n\t0%{ opacity:0; width:0;}\r\n\t50%{ opacity:.5;}\r\n\t100%{ opacity:0; width:95%;}\r\n}\r\n@-moz-keyframes animate-shine{\r\n\t0%{ opacity:0; width:0;}\r\n\t50%{ opacity:.5;}\r\n\t100%{ opacity:0; width:95%;}\r\n}\r\n@-webkit-keyframes animate-shine{\r\n\t0%{ opacity:0; width:0;}\r\n\t50%{ opacity:.5;}\r\n\t100%{ opacity:0; width:95%;}\r\n}\r\n<\/pre>\n<p>\u8bf7\u5927\u5bb6\u4f7f\u7528\u73b0\u4ee3\u6d4f\u89c8\u5668\u8bbf\u95ee\uff1a Firefox 5+, Chrome 6+, Safari 5+<\/p>\n<p><a class=\"dlBtn\" title=\"\u67e5\u770b\u6f14\u793a\" href=\"http:\/\/www.bluesdream.com\/case\/css3\/ProgressBars\/index.html\" target=\"_blank\">\u67e5\u770b\u6f14\u793a<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4e3b\u8981\u8fd0\u52a8\u5230\u7684css3\u5c5e\u6027\u6709\uff1aborder-radius(\u8bbe\u7f6e\u5706\u89d2)\u3001box-shadow(\u9634\u5f71)\u3001transition(\u8fc7\u6e21\u6548\u679c)\u3002<\/p>\n","protected":false},"author":1,"featured_media":138,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[75],"tags":[76,78],"class_list":["post-139","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-front-end","tag-css3","tag-html"],"_links":{"self":[{"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/posts\/139"}],"collection":[{"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/comments?post=139"}],"version-history":[{"count":0,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/posts\/139\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/media\/138"}],"wp:attachment":[{"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/media?parent=139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/categories?post=139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/tags?post=139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}