{"id":181,"date":"2012-09-14T16:56:49","date_gmt":"2012-09-14T08:56:49","guid":{"rendered":"http:\/\/www.bluesdream.com\/blog\/?p=181"},"modified":"2012-11-26T11:59:16","modified_gmt":"2012-11-26T03:59:16","slug":"css3-skill-bar-animation","status":"publish","type":"post","link":"https:\/\/www.bluesdream.com\/blog\/css3-skill-bar-animation.html","title":{"rendered":"CSS3 Skill Bar Animation"},"content":{"rendered":"<p>\u53ef\u80fd\u6211\u6709\u4e00\u4e9b\u5c0f\u5c0f\u6d01\u7656\uff0c\u90a3\u5c31\u662f\u770b\u5230\u597d\u770b\u3001\u70ab\u9177\u7684\u7f51\u9875\u6548\u679c\u90fd\u4f1a\u5fcd\u4e0d\u4f4f\u60f3\u81ea\u5df1\u4e5f\u5236\u4f5c\u4e00\u4efd\uff0c\u54ea\u6015\u4e8b\u6a21\u4eff\uff0c\u4e5f\u5fc5\u987b\u81ea\u5df1\u624b\u52a8\u6572\u4e00\u8fb9\u4ee3\u7801\u3002\u81ea\u5df1\u8eab\u8fb9\u4e5f\u56e4\u79ef\u4e86\u86ee\u591a\u7684\u5b9e\u4f8b\uff0c\u4eca\u540e\u6211\u4f1a\u9646\u7eed\u628a\u4ee5\u524d\u5199\u7684\u4e00\u4e9bCSS3\u548cjQuery\u6848\u4f8b\u62ff\u51fa\u6765\u5206\u4eab\u5e76\u52a0\u4ee5\u6ce8\u91ca\uff0c\u4e00\u65b9\u9762\u63d0\u4f9b\u7ed9\u5927\u5bb6\uff0c\u4e00\u65b9\u9762\u4e5f\u7b97\u662f\u6e29\u6545\u800c\u77e5\u65b0\u5427\u3002<\/p>\n<p>\u4eca\u5929\u6240\u5c55\u793a\u7684\u6848\u4f8b\uff0c\u4e3b\u8981\u4f7f\u7528\u5230\u4e862\u4e2aCSS3\u5c5e\u6027animation\u548ckeyframes\u3002\u5982\u679c\u5927\u5bb6\u4f1aFlash\uff0c\u76f8\u4fe1\u5c31\u4f1a\u5f88\u5bb9\u6613\u641e\u61c2\u3002\u6839\u636e\u4f8b\u5b50\u4e2d\u7684\u4ee3\u7801\uff0c\u6211\u4eec\u53ef\u4ee5\u8fd9\u6837\u7406\u89e3\uff1a<br \/>\nanimation\uff1a\u5b9e\u4f8b\u540d\u79f0 \u52a8\u753b\u65f6\u957f \u52a8\u753b\u65b9\u5f0f;<br \/>\nkeyframes\uff1a\u5b9e\u4f8b\u540d\u79f0 { \u4ece{\u8d77\u59cb\u4f4d\u7f6e} \u5230{\u7ed3\u675f\u4f4d\u7f6e} };<!--more--><\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n* {margin: 0; padding: 0; outline: none;}\r\n\r\nul,li{ list-style:none; }\r\n\r\nbody {\r\n\tbackground: url(bg.gif);\r\n\tfont: 12px normal Verdana, Arial, Helvetica, sans-serif;\r\n\tcolor:#fff;\r\n}\r\n\r\nh1 {\r\n\tfont: 4em normal Arial, Helvetica, sans-serif;\r\n\tpadding:50px 0;\r\n\ttext-align:center;\r\n\tcolor:#bbb;\r\n}\r\n\r\n.container {\r\n\twidth: 286px;\r\n\tmargin: 0 auto; \r\n\toverflow: hidden;\r\n}\r\n\r\n.content{\r\n\twidth:278px;\r\n\tposition:relative;\r\n\tfont-size:12px;\r\n\tline-height:2em;\r\n\tpadding-top:30px;\r\n}\r\n.col { width:286px;}\r\n\r\n#skill li { \r\n\tmargin-bottom:50px; \r\n\tbackground:#000; \r\n\theight:5px; \r\n\tborder-radius:3px; \r\n\tborder-left:1px solid #111; \r\n\tborder-top:1px solid #111; \r\n\tborder-right:1px solid #333; \r\n\tborder-bottom:1px solid #333;  \r\n}\r\n\r\n#skill li em { \r\n\tposition:relative; \r\n\ttop:-30px;\r\n}\r\n\r\n.expand { \r\n\theight:1px; \r\n\tmargin:2px 3px; \r\n\tbackground:#2187e7; \r\n\tposition:absolute;\r\n\tbox-shadow:0px 0px 10px 1px rgba(0,198,255,0.5);\r\n}\r\n\r\n.html5 { width:70%;  -moz-animation:html5 2s ease-out;  webkit-animation:html5 2s ease-out;       }\r\n.css3 { width:90%;  -moz-animation:css3 2s ease-out;  webkit-animation:css3 2s ease-out;        }\r\n.jquery { width:50%;  -moz-animation:jquery 2s ease-out;  -webkit-animation:jquery 2s ease-out;      }\r\n.photoshop { width:10%;  -moz-animation:photoshop 2s ease-out;  -webkit-animation:photoshop 2s ease-out;   }\r\n.dreamweaver { width:100%; -moz-animation:dreamweaver 2s ease-out;  -webkit-animation:dreamweaver 2s ease-out; }\r\n\r\n@-moz-keyframes html5 { 0%  { width:0px;} 100%{ width:70%;}  }\r\n@-moz-keyframes css3 { 0%  { width:0px;} 100%{ width:90%;}  }\r\n@-moz-keyframes jquery      { 0%  { width:0px;} 100%{ width:50%;}  }\r\n@-moz-keyframes photoshop   { 0%  { width:0px;} 100%{ width:10%;}  }\r\n@-moz-keyframes dreamweaver { 0%  { width:0px;} 100%{ width:100%;} }\r\n\r\n@-webkit-keyframes html5       { 0%  { width:0px;} 100%{ width:70%;}  }\r\n@-webkit-keyframes css3        { 0%  { width:0px;} 100%{ width:90%;}  }\r\n@-webkit-keyframes jquery      { 0%  { width:0px;} 100%{ width:50%;}  }\r\n@-webkit-keyframes photoshop   { 0%  { width:0px;} 100%{ width:10%;}  }\r\n@-webkit-keyframes dreamweaver { 0%  { width:0px;} 100%{ width:100%;} }\r\n\r\n\/* Info *\/\r\n#info{ width:960px; margin:auto; font:13px\/20px Tahoma,Arial; text-align:center;}\r\n#info p{ text-shadow: 0 1px 0 #000; color:#BBB;}\r\n#info a{ text-decoration:none;color:#BBB;}\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=\"Demo\" href=\"http:\/\/www.bluesdream.com\/case\/css3\/SkillBarAnimation\/\" target=\"_blank\">Demo<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u53ef\u80fd\u6211\u6709\u4e00\u4e9b\u5c0f\u5c0f\u6d01\u7656\uff0c\u90a3\u5c31\u662f\u770b\u5230\u597d\u770b\u3001\u70ab\u9177\u7684\u7f51\u9875\u6548\u679c\u90fd\u4f1a\u5fcd\u4e0d\u4f4f\u60f3\u81ea\u5df1\u4e5f\u5236\u4f5c\u4e00\u4efd\uff0c\u54ea\u6015\u4e8b\u6a21\u4eff\uff0c\u4e5f\u5fc5\u987b\u81ea\u5df1\u624b\u52a8\u6572\u4e00\u8fb9\u4ee3\u7801\u3002\u81ea\u5df1\u8eab\u8fb9\u4e5f\u56e4\u79ef\u4e86\u86ee\u591a\u7684\u5b9e\u4f8b\uff0c\u4eca\u540e\u6211\u4f1a\u9646\u7eed\u628a\u4ee5\u524d\u5199\u7684\u4e00\u4e9bCSS3\u548cjQuery\u6848\u4f8b\u62ff\u51fa\u6765\u5206\u4eab\u5e76\u52a0\u4ee5\u6ce8\u91ca\uff0c\u4e00\u65b9\u9762\u63d0\u4f9b\u7ed9\u5927\u5bb6\uff0c\u4e00\u65b9\u9762\u4e5f\u7b97\u662f\u6e29\u6545\u800c\u77e5\u65b0\u5427\u3002 \u4eca\u5929\u6240\u5c55\u793a\u7684\u6848\u4f8b\uff0c\u4e3b\u8981\u4f7f\u7528\u5230\u4e862\u4e2aCSS3\u5c5e\u6027animation\u548ckeyframes\u3002\u5982\u679c\u5927\u5bb6\u4f1aFlash\uff0c\u76f8\u4fe1\u5c31\u4f1a\u5f88\u5bb9\u6613\u641e\u61c2\u3002\u6839\u636e\u4f8b\u5b50\u4e2d\u7684\u4ee3\u7801\uff0c\u6211\u4eec\u53ef\u4ee5\u8fd9\u6837\u7406\u89e3\uff1a animation\uff1a\u5b9e\u4f8b\u540d\u79f0 \u52a8\u753b\u65f6\u957f \u52a8\u753b\u65b9\u5f0f; keyframes\uff1a\u5b9e\u4f8b\u540d\u79f0 { \u4ece{\u8d77\u59cb\u4f4d\u7f6e} \u5230{\u7ed3\u675f\u4f4d\u7f6e} };<\/p>\n","protected":false},"author":1,"featured_media":182,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[75],"tags":[76,78],"class_list":["post-181","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\/181"}],"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=181"}],"version-history":[{"count":0,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/posts\/181\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/media\/182"}],"wp:attachment":[{"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/media?parent=181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/categories?post=181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/tags?post=181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}