{"id":589,"date":"2017-02-26T11:23:44","date_gmt":"2017-02-26T03:23:44","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=589"},"modified":"2017-02-26T11:23:44","modified_gmt":"2017-02-26T03:23:44","slug":"%e8%b6%85%e7%ba%a7%e6%bc%82%e4%ba%ae%e7%9a%84css3%e5%8a%a8%e7%94%bb%e6%8a%98%e7%ba%b8%e7%9b%ae%e5%bd%95","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=589","title":{"rendered":"\u8d85\u7ea7\u6f02\u4eae\u7684css3\u52a8\u753b\u6298\u7eb8\u76ee\u5f55"},"content":{"rendered":"
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <title>\u524d\u7aefABC-\u6298\u53e0\u5bfc\u822a<\/title>\r\n    <style>\r\n        body{margin: 0;}\r\n        @-webkit-keyframes show {\r\n            0%{\r\n                -webkit-transform: rotateX(-90deg);\r\n            }\r\n            30%{\r\n                -webkit-transform: rotateX(45deg);\r\n            }\r\n            60%{\r\n                -webkit-transform: rotateX(-30deg);\r\n            }\r\n            100%{\r\n                -webkit-transform: rotateX(0deg);\r\n            }\r\n\r\n        }\r\n        @-webkit-keyframes hidden {\r\n            0%{\r\n                -webkit-transform: rotateX(0deg);\r\n            }\r\n            30%{\r\n                -webkit-transform: rotateX(-30deg);\r\n            }\r\n            60%{\r\n                -webkit-transform: rotateX(-60deg);\r\n            }\r\n            100%{\r\n                -webkit-transform: rotateX(-120deg);\r\n            }\r\n        }\r\n        #wrap{ width: 160px;margin: 30px auto;position: relative;color: #fff;-webkit-transform-style: preserve-3d;perspective: 800px;}\r\n        #wrap h2{height:40px;width: 100%;background: #0e7277;line-height: 40px;font-size: 20px;font-weight: 600;position: relative;z-index: 10;}\r\n        #wrap div{height: auto;width:100%;position: absolute;top:32px;-webkit-transform-style: preserve-3d;-webkit-transform: rotateX(-90deg);-webkit-transform-origin: top;}\r\n        #wrap span{display: block;width:100%; height:30px;line-height: 30px;background: plum;transition: 1s;box-shadow: inset 0 0 0 20px rgba(0,0,0,1)}\r\n        #wrap .show{-webkit-animation: 2s show;-webkit-transform: rotateX(0deg)}\r\n        #wrap .hidden{-webkit-animation: 2s hidden;-webkit-transform: rotateX(-120deg)}\r\n        #wrap>div:nth-child(1){top:40px;}\r\n        #wrap .show>span{box-shadow: inset 0 0 0 20px rgba(0,0,0,0);}\r\n        #btn{position: absolute;left:20%;}\r\n    <\/style>\r\n    <script>\r\n        window.onload=function () {\r\n            var btn = document.getElementById('btn');\r\n            var wrap = document.getElementById('wrap');\r\n            var aDiv = wrap.getElementsByTagName('div');\r\n            var timer = null;\r\n            btn.onOff = true;\r\n            btn.onclick = function () {\r\n                console.log(btn.onOff,timer)\r\n                if(timer){\r\n                    return;\r\n                }\r\n                if(btn.onOff){\r\n                    btn.onOff = false;\r\n                    var n=0;\r\n                    timer = setInterval(function () {\r\n                        aDiv[n].className='show';\r\n                        n++;\r\n                        if(n>=aDiv.length){\r\n                            clearInterval(timer);\r\n                            timer = null;\r\n                        }\r\n                    },200)\r\n\r\n                }else{\r\n                    console.log(2);\r\n                    var n=aDiv.length-1;\r\n                    btn.onOff = true;\r\n                    timer = setInterval(function () {\r\n                        aDiv[n].className = 'hidden';\r\n                        n--;\r\n                        if(n<0){\r\n                            clearInterval(timer);\r\n                            timer = null;\r\n                        }\r\n                    },200)\r\n                }\r\n            }\r\n\r\n        }\r\n    <\/script>\r\n<\/head>\r\n<body>\r\n<input type=\"button\" id=\"btn\" value=\"\u70b9\u6211\">\r\n<div  id=\"wrap\">\r\n    <h2>\u8fd9\u662f\u5927\u6807\u9898<\/h2>\r\n    <div style=\"\" >\r\n        <span>\u6807\u9898\u4e00<\/span>\r\n        <div   style=\"\" >\r\n            <span>\u6807\u9898\u4e8c<\/span>\r\n            <div>\r\n                <span>\u6807\u9898\u4e09<\/span>\r\n                <div>\r\n                    <span>\u6807\u9898\u56db<\/span>\r\n                    <div>\r\n                        <span>\u6807\u9898\u4e94<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » \u8d85\u7ea7\u6f02\u4eae\u7684css3\u52a8\u753b\u6298\u7eb8\u76ee\u5f55<\/a><\/p>","protected":false},"excerpt":{"rendered":"
<!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>\u524d\u7aefABC-\u6298\u53e0\u5bfc\u822a […]<\/p>\n","protected":false},"author":1,"featured_media":105,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,3],"tags":[12,137,43],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/589"}],"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=589"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/589\/revisions"}],"predecessor-version":[{"id":590,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/589\/revisions\/590"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/media\/105"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=589"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=589"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}