{"id":383,"date":"2012-11-27T15:38:44","date_gmt":"2012-11-27T07:38:44","guid":{"rendered":"http:\/\/www.bluesdream.com\/blog\/?p=383"},"modified":"2012-11-28T14:05:06","modified_gmt":"2012-11-28T06:05:06","slug":"css3-draw-windows-8-logo","status":"publish","type":"post","link":"https:\/\/www.bluesdream.com\/blog\/css3-draw-windows-8-logo.html","title":{"rendered":"CSS3 \u7ed8\u5236Windows 8 logo"},"content":{"rendered":"

\u4eca\u5929\u7684\u5185\u5bb9\u975e\u5e38\u7b80\u5355\uff0c\u4f46\u6709\u4e2a\u6bd4\u8f83\u5173\u952e\u7684\u5c5e\u6027\uff1aperspective\uff08\u900f\u89c6\uff09\u3002\u6240\u6709\u5143\u7d20\u90fd\u662f\u653e\u7f6e\u5728z=0\u7684\u5e73\u9762\u4e0aperspective\u5c5e\u6027\u8bbe\u7f6e\u955c\u5934\u5230\u5143\u7d20\u5e73\u9762\u7684\u8ddd\u79bb\uff08\u5b66\u8fc7AUTOCAD\u7684\u7ae5\u978b\u5e94\u8be5\u5f88\u5bb9\u6613\u7406\u89e3\u5427\uff09\u3002\u662f\u4e0d\u662f\u8fd8\u6709\u70b9\u4e91\u91cc\u96fe\u91cc\u5462\uff1f\u6211\u4eec\u6765\u4e3e\u4e2a\u4f8b\u5b50\uff0c\u60f3\u60f3\u4f60\u4ece\u5929\u4e0a\u4fef\u770b\u4e00\u5ea7\u91d1\u5b57\u5854\u3002\u955c\u5934\u5230\u5143\u7d20\u5e73\u9762\u7684\u8ddd\u79bb\uff0c\u5c31\u662f\u5854\u7684\u9876\u90e8\uff08\u89c6\u70b9\uff09\u548c\u5730\u9762\uff08Z-\u5e73\u9762\uff09\u4e4b\u95f4\u7684\u8ddd\u79bb\u3002<\/p>\n

HTML CODE\uff1a<\/strong><\/p>\n

\r\n<div class="wrapper">\r\n\t<div class="logo"><\/div>\r\n\t<div class="logo_text">Windows 8<\/div>\r\n<\/div>\r\n<\/pre>\n
<\/p>\n
CSS CODE\uff1a<\/strong><\/p>\n
\r\n.wrapper{\r\n\twidth:860px; height:150px;\r\n\tmargin:100px auto;\r\n}\r\n.logo {\r\n\tposition: relative; \r\n\tfloat: left;\r\n\twidth: 200px; \r\n\theight: 150px;\r\n\tbackground: #00ADEF;\r\n\t-webkit-transform: perspective(400px) rotateY(-25deg);\r\n\t-webkit-animation: logo_animation 5s infinite;\r\n\t    -moz-animation: logo_animation 5s infinite;\r\n\t      -ms-animation: logo_animation 5s infinite;\r\n}\r\n.logo::after{\r\n\tcontent: '';\r\n\tbackground: #F5F5F5;\r\n\twidth: 10px; height: 100%;\r\n\tposition: absolute;\r\n\tleft: 50%; margin-left:-5px;\r\n\ttop: 0;\r\n}\r\n.logo::before {\r\n\tcontent: '';\r\n\tbackground: #F5F5F5;\r\n\twidth: 100%; height: 10px;\r\n\tposition: absolute;\r\n\ttop: 50%; margin-top: -5px;\r\n\tleft: 0;\r\n}\r\n.logo_text {\r\n\tcolor: #00ADEF;\r\n\tline-height: 150px;\r\n\tfont-size: 130px;\r\n\tfont-family:"Helvetica Neue", Arial, Helvetica, sans-serif;\r\n\tpadding-left: 20px;\r\n\tfloat: left;\r\n}\r\n\r\n@-webkit-keyframes logo_animation {\r\n\t0%, 100% { \r\n\t\t-webkit-transform: perspective(400px) rotateY(-25deg);\r\n\t}\r\n\t50% {\r\n\t\t-webkit-transform: perspective(400px) rotateY(-35deg);\r\n\t}\r\n}\r\n@-moz-keyframes logo_animation {\r\n\t0%, 100% { \r\n\t\t-moz-transform: perspective(400px) rotateY(-25deg);\r\n\t}\r\n\t50% {\r\n\t\t-moz-transform: perspective(400px) rotateY(-35deg);\r\n\t}\r\n}\r\n@-ms-keyframes logo_animation {\r\n\t0%, 100% { \r\n\t\t-ms-transform: perspective(400px) rotateY(-25deg);\r\n\t}\r\n\t50% {\r\n\t\t-ms-transform: perspective(400px) rotateY(-35deg);\r\n\t}\r\n}\r\n<\/pre>\n
Demo<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
\u4eca\u5929\u7684\u5185\u5bb9\u975e\u5e38\u7b80\u5355\uff0c\u4f46\u6709\u4e2a\u6bd4\u8f83\u5173\u952e\u7684\u5c5e\u6027\uff1aperspective\uff08\u900f\u89c6\uff09\u3002\u6240\u6709\u5143\u7d20\u90fd\u662f\u653e\u7f6e\u5728z=0\u7684\u5e73\u9762\u4e0aperspective\u5c5e\u6027\u8bbe\u7f6e\u955c\u5934\u5230\u5143\u7d20\u5e73\u9762\u7684\u8ddd\u79bb\uff08\u5b66\u8fc7AUTOCAD\u7684\u7ae5\u978b\u5e94\u8be5\u5f88\u5bb9\u6613\u7406\u89e3\u5427\uff09\u3002\u662f\u4e0d\u662f\u8fd8\u6709\u70b9\u4e91\u91cc\u96fe\u91cc\u5462\uff1f\u6211\u4eec\u6765\u4e3e\u4e2a\u4f8b\u5b50\uff0c\u60f3\u60f3\u4f60\u4ece\u5929\u4e0a\u4fef\u770b\u4e00\u5ea7\u91d1\u5b57\u5854\u3002\u955c\u5934\u5230\u5143\u7d20\u5e73\u9762\u7684\u8ddd\u79bb\uff0c\u5c31\u662f\u5854\u7684\u9876\u90e8\uff08\u89c6\u70b9\uff09\u548c\u5730\u9762\uff08Z-\u5e73\u9762\uff09\u4e4b\u95f4\u7684\u8ddd\u79bb\u3002 HTML CODE\uff1a <div class="wrapper"> <div class="logo"><\/div> <div class="logo_text">Windows 8<\/div> <\/div><\/p>\n","protected":false},"author":1,"featured_media":384,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[75],"tags":[93,20,76,78,82],"class_list":["post-383","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-front-end","tag-animation","tag-css","tag-css3","tag-html","tag-transform"],"_links":{"self":[{"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/posts\/383"}],"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=383"}],"version-history":[{"count":0,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/posts\/383\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/media\/384"}],"wp:attachment":[{"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/media?parent=383"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/categories?post=383"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/tags?post=383"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}