{"id":95,"date":"2017-01-13T14:20:50","date_gmt":"2017-01-13T06:20:50","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=95"},"modified":"2017-01-26T18:23:04","modified_gmt":"2017-01-26T10:23:04","slug":"%e4%bd%bf%e7%94%a8%e7%ba%afcss3%e5%ae%9e%e7%8e%b0%e8%bd%ac%e5%8a%a8%e6%97%b6%e9%92%9f%e6%a1%88%e4%be%8b","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=95","title":{"rendered":"\u4f7f\u7528\u7eafCSS3\u5b9e\u73b0\u8f6c\u52a8\u65f6\u949f\u6848\u4f8b"},"content":{"rendered":"<pre class=\"brush:html;toolbar:false\">&lt;!DOCTYPE\u00a0html&gt;\u00a0\u00a0\r\n&lt;html&gt;\u00a0\u00a0\r\n&lt;head\u00a0lang=\"en\"&gt;\u00a0\u00a0\r\n\u00a0\u00a0&lt;meta\u00a0charset=\"UTF-8\"&gt;\u00a0\u00a0\r\n\u00a0\u00a0&lt;title&gt;&lt;\/title&gt;\u00a0\u00a0\r\n\u00a0\u00a0&lt;style&gt;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0.box {\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0width:\u00a0200px;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0height:\u00a0200px;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0border:\u00a010px\u00a0solid\u00a0#ccc;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0border-radius:\u00a0110px;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0margin:\u00a0100px\u00a0auto;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0position:\u00a0relative;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 }\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 .line\u00a0{\u00a0\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width:\u00a04px;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0height:\u00a0200px;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0background:\u00a0#ccc;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0position:\u00a0absolute;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0left:\u00a050%;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0margin-left:\u00a0-2px;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 }\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \/*\u65f6\u949f\u523b\u5ea6\u7ebf*\/\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0.line1\u00a0{\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0transform:\u00a0rotate(30deg);\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0}\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0.line2\u00a0{\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0transform:\u00a0rotate(60deg);\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0}\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0.line3\u00a0{\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0transform:\u00a0rotate(90deg);\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0}\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0.line4\u00a0{\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0transform:\u00a0rotate(120deg);\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0}\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0.line5\u00a0{\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0transform:\u00a0rotate(150deg);\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0}\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0.line6\u00a0{\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0transform:\u00a0rotate(180deg);\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0}\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0\/*\u5c06\u523b\u5ea6\u7ebf\u906e\u4f4f\uff0c\u53ea\u7559\u4e00\u70b9\u70b9*\/\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0.mask\u00a0{\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0width:\u00a0180px;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0height:\u00a0180px;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0background:\u00a0#fff;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0border-radius:\u00a090px;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0position:\u00a0absolute;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0margin:\u00a010px;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0}\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0\/*\u65f6\u9488*\/\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0.hour\u00a0{\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0width:\u00a08px;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0height:\u00a050px;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0background:\u00a0red;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0position:\u00a0absolute;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0left:\u00a050%;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0top:\u00a050%;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0margin-left:\u00a0-4px;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0margin-top:\u00a0-50px;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\/*43200s\u5300\u901f\u8f6c\u52a8\u4e00\u5708*\/\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0animation:\u00a0move\u00a043200s\u00a0linear\u00a0infinite;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\/*\u8bbe\u7f6e\u65cb\u8f6c\u7684\u4e2d\u5fc3\u70b9\u4e3a\u4e2d\u95f4\u5e95\u90e8*\/\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0transform-origin:\u00a0center\u00a0bottom;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0}\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0\/*\u5206\u9488*\/\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0.minute\u00a0{\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0width:\u00a06px;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0height:\u00a060px;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0background:\u00a0blue;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0position:\u00a0absolute;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0left:\u00a050%;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0top:\u00a050%;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0margin-left:\u00a0-3px;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0margin-top:\u00a0-60px;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\/*3600s\u8f6c\u4e00\u5708\uff0c\u5300\u901f\u8f6c\u52a8*\/\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0animation:\u00a0move\u00a03600s\u00a0linear\u00a0infinite;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\/*\u8bbe\u7f6e\u65cb\u8f6c\u7684\u4e2d\u5fc3\u70b9\u4e3a\u4e2d\u95f4\u5e95\u90e8*\/\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0transform-origin:\u00a0center\u00a0bottom;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0}\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0\/*\u79d2\u9488*\/\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0.second\u00a0{\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0width:\u00a04px;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0height:\u00a080px;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0background:\u00a0yellow;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0position:\u00a0absolute;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0left:\u00a050%;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0top:\u00a050%;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0margin-left:\u00a0-2px;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0margin-top:\u00a0-80px;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\/*60s\u8f6c\u4e00\u5708\uff0c\u520660\u6b65*\/\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0animation:\u00a0move\u00a060s\u00a0infinite\u00a0steps(60);\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\/*\u8bbe\u7f6e\u65cb\u8f6c\u7684\u4e2d\u5fc3\u70b9\u4e3a\u4e2d\u95f4\u5e95\u90e8*\/\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0transform-origin:\u00a0center\u00a0bottom;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0}\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0\/*\u6700\u4e2d\u5fc3\u7684\u906e\u7f69\u5c42*\/\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0.circle\u00a0{\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0width:\u00a012px;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0height:\u00a012px;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0border-radius:\u00a06px;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0background:\u00a0#ccc;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0position:\u00a0absolute;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0left:\u00a050%;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0margin-left:\u00a0-6px;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0margin-top:\u00a090px;\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0}\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0\/*\u65cb\u8f6c\u4ece0\u5ea6\u5230360\u5ea6*\/\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0@keyframes\u00a0move\u00a0{\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0from\u00a0{\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 transform:\u00a0rotate(0deg);\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0}\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0to\u00a0{\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 transform:\u00a0rotate(360deg);\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0}\u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0} \u00a0\r\n\u00a0 &lt;\/style&gt;\u00a0\u00a0\r\n&lt;\/head&gt;\u00a0\u00a0\r\n&lt;body&gt;\u00a0\u00a0\r\n\u00a0\u00a0&lt;div\u00a0class=\"box\"&gt;\u00a0\u00a0\r\n\u00a0\u00a0\u00a0&lt;div\u00a0class=\"line\u00a0line1\"&gt;&lt;\/div&gt;\u00a0\u00a0\r\n\u00a0\u00a0\u00a0&lt;div\u00a0class=\"line\u00a0line2\"&gt;&lt;\/div&gt;\u00a0\u00a0\r\n\u00a0\u00a0\u00a0&lt;div\u00a0class=\"line\u00a0line3\"&gt;&lt;\/div&gt;\u00a0\u00a0\r\n\u00a0\u00a0\u00a0&lt;div\u00a0class=\"line\u00a0line4\"&gt;&lt;\/div&gt;\u00a0\u00a0\r\n\u00a0\u00a0\u00a0&lt;div\u00a0class=\"line\u00a0line5\"&gt;&lt;\/div&gt;\u00a0\u00a0\r\n\u00a0\u00a0\u00a0&lt;div\u00a0class=\"line\u00a0line6\"&gt;&lt;\/div&gt;\u00a0\u00a0\r\n\u00a0\u00a0\u00a0&lt;div\u00a0class=\"mask\"&gt;&lt;\/div&gt;\u00a0\u00a0\r\n\u00a0\u00a0\u00a0&lt;div\u00a0class=\"hour\"&gt;&lt;\/div&gt;\u00a0\u00a0\r\n\u00a0\u00a0\u00a0&lt;div\u00a0class=\"minute\"&gt;&lt;\/div&gt;\u00a0\u00a0\r\n\u00a0\u00a0\u00a0&lt;div\u00a0class=\"second\"&gt;&lt;\/div&gt;\u00a0\u00a0\r\n\u00a0\u00a0\u00a0&lt;div\u00a0class=\"circle\"&gt;&lt;\/div&gt;\u00a0\u00a0\r\n\u00a0 &lt;\/div&gt;\u00a0\u00a0\r\n&lt;\/body&gt;\u00a0\u00a0\r\n&lt;\/html&gt;<\/pre>\n<p class=\"post-copyright\">\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a<a href=\"http:\/\/www.qdabc.cn\">\u524d\u7aefABC<\/a> &raquo; <a href=\"http:\/\/www.qdabc.cn\/?p=95\">\u4f7f\u7528\u7eafCSS3\u5b9e\u73b0\u8f6c\u52a8\u65f6\u949f\u6848\u4f8b<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>&lt;!DOCTYPE\u00a0html&gt;\u00a0\u00a0 &lt;html&gt;\u00a0\u00a0 &lt;head\u00a0lang=&#8221;en&#8221;&gt;\u00a0\u00a0 \u00a0\u00a0&lt;meta\u00a0charset=&#8221;UTF-8&#8243;&gt;\u00a0\u00a0 \u00a0\u00a0&#038; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":96,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[12,13],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/95"}],"collection":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=95"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/95\/revisions"}],"predecessor-version":[{"id":97,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/95\/revisions\/97"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/media\/96"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=95"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=95"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=95"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}