{"id":2688,"date":"2017-06-16T22:00:51","date_gmt":"2017-06-16T14:00:51","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=2688"},"modified":"2017-06-16T22:00:51","modified_gmt":"2017-06-16T14:00:51","slug":"%e7%94%a8css3%e4%bc%aa%e7%b1%bb%e7%94%bb%e5%9b%be%e6%a0%87","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=2688","title":{"rendered":"\u7528css3\u4f2a\u7c7b\u753b\u56fe\u6807"},"content":{"rendered":"
<!DOCTYPE html>\r\n<html>\r\n\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <title><\/title>\r\n<\/head>\r\n<style>\r\n    body {\r\n        color: #eee;\r\n    }\r\n\r\n    .box {\r\n        position: relative;\r\n        border-radius: 50%;\r\n        border: 6px dotted #666;\r\n        width: 100px;\r\n        height: 100px;\r\n        animation: a 5s linear infinite;\r\n        display: inline-block;\r\n    }\r\n\r\n    .box:before {\r\n        box-sizing: border-box;\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 50%;\r\n        transform: translate(-50%, -50%);\r\n        -webkit-transform: translate(-50%, -50%);\r\n        width: 80px;\r\n        content: '';\r\n        height: 80px;\r\n        border-radius: 50%;\r\n        border: 15px solid transparent;\r\n        box-shadow: 0 0 0 10px #666, 0 0 0 10px #666 inset;\r\n    }\r\n\r\n    @keyframes a {\r\n        from {\r\n            transform: rotate(0deg);\r\n        }\r\n        to {\r\n            transform: rotate(360deg);\r\n        }\r\n    }\r\n\r\n    .box1 {\r\n        position: relative;\r\n        border-radius: 50%;\r\n        border: 6px solid #666;\r\n        width: 100px;\r\n        height: 100px;\r\n        animation: a 5s linear infinite;\r\n        -webkit-animation: a 5s linear infinite;\r\n        display: inline-block;\r\n        border-left: 6px solid transparent;\r\n    }\r\n\r\n    .box1:before {\r\n        width: 0;\r\n        height: 0;\r\n        line-height: 0;\r\n        font-size: 0;\r\n        border-width: 10px;\r\n        border-style: solid;\r\n        border-color: transparent #666 transparent transparent;\r\n        content: '';\r\n        position: absolute;\r\n        top: 71px;\r\n        left: -4px;\r\n        transform: rotate(45deg);\r\n        -webkit-transform: rotate(45deg);\r\n    }\r\n\r\n    .box2 {\r\n        position: relative;\r\n        width: 0px;\r\n        height: 0px;\r\n        padding: 20px 10px;\r\n        border-width: 50px;\r\n        border-left: none;\r\n        border-color: transparent #666 transparent transparent;\r\n        border-style: solid;\r\n        box-shadow: inset 15px 0 #666;\r\n        display: inline-block;\r\n    }\r\n\r\n    .box2:after {\r\n        position: absolute;\r\n        top: -65px;\r\n        left: -30px;\r\n        width: 140px;\r\n        height: 140px;\r\n        content: '';\r\n        border-width: 20px;\r\n        border-style: double;\r\n        border-radius: 50%;\r\n        border-color: transparent #666 transparent transparent;\r\n    }\r\n\r\n    .box2:before {\r\n        position: absolute;\r\n        top: -40px;\r\n        left: -7px;\r\n        width: 90px;\r\n        height: 90px;\r\n        content: '';\r\n        border-width: 20px;\r\n        border-style: double;\r\n        border-radius: 50%;\r\n        border-color: transparent #666 transparent transparent;\r\n    }\r\n\r\n    .box3 {\r\n        width: 100px;\r\n        height: 100px;\r\n        border-radius: 50%;\r\n        border: 5px solid #666;\r\n        position: relative;\r\n    }\r\n\r\n    .box3:after {\r\n        width: 80px;\r\n        height: 6px;\r\n        content: '';\r\n        background: #666;\r\n        position: absolute;\r\n        top: 47px;\r\n        left: 10px;\r\n    }\r\n\r\n    .box3:before {\r\n        width: 6px;\r\n        height: 80px;\r\n        content: '';\r\n        background: #666;\r\n        position: absolute;\r\n        top: 10px;\r\n        left: 47px;\r\n    }\r\n\r\n    .box4 {\r\n        width: 100px;\r\n        height: 100px;\r\n        border-radius: 50%;\r\n        border: 5px solid #666;\r\n        position: relative;\r\n    }\r\n\r\n    .box4:after {\r\n        width: 40px;\r\n        height: 6px;\r\n        content: '';\r\n        background: #666;\r\n        position: absolute;\r\n        top: 47px;\r\n        left: 10px;\r\n        transform: rotate(45deg);\r\n        -webkit-transform: rotate(45deg);\r\n    }\r\n\r\n    .box4:before {\r\n        width: 6px;\r\n        height: 60px;\r\n        content: '';\r\n        background: #666;\r\n        position: absolute;\r\n        top: 15px;\r\n        left: 60px;\r\n        transform: rotate(45deg);\r\n        -webkit-transform: rotate(45deg)\r\n    }\r\n\r\n    .box5 {\r\n        position: relative;\r\n        width: 100px;\r\n        height: 100px;\r\n        border-radius: 50%;\r\n        border: 10px dotted #666;\r\n        animation: a1 5s infinite linear;\r\n    }\r\n\r\n    .box5:before {\r\n        position: absolute;\r\n        width: 80px;\r\n        height: 80px;\r\n        content: '';\r\n        border-radius: 50%;\r\n        top: 0px;\r\n        left: 0px;\r\n        border: 10px solid #666;\r\n        animation: a1 5s infinite linear;\r\n    }\r\n\r\n    .box5:after {\r\n        position: absolute;\r\n        width: 40px;\r\n        height: 40px;\r\n        content: '';\r\n        border-radius: 50%;\r\n        border: 10px solid #666;\r\n        top: 20px;\r\n        left: 20px;\r\n        animation: a1 5s infinite linear;\r\n    }\r\n\r\n    @keyframes a1 {\r\n        from {\r\n            transform: rotate(0deg);\r\n            border-color: red;\r\n        }\r\n        to {\r\n            transform: rotate(360deg);\r\n            border-color: green;\r\n        }\r\n    }\r\n\r\n    .box6 {\r\n        position: relative;\r\n        width: 0px;\r\n        height: 0px;\r\n        border: 80px solid #000;\r\n        border-left: none;\r\n        border-top-color: transparent;\r\n        border-bottom-color: transparent;\r\n        padding: 30px 25px;\r\n        box-shadow: inset 20px 0 0 #000;\r\n    }\r\n\r\n    .box6:after {\r\n        position: absolute;\r\n        width: 200px;\r\n        height: 200px;\r\n        content: '';\r\n        border-width: 50px;\r\n        border-radius: 50%;\r\n        border-style: double;\r\n        border-color: transparent #000 transparent transparent;\r\n        left: 60px;\r\n        top: -70px;\r\n    }\r\n<\/style>\r\n\r\n<body>\r\n    <div class=\"box\"><\/div>\r\n    <div class=\"box1\"><\/div>\r\n    <div class=\"box2\"><\/div>\r\n    <div class=\"box3\"><\/div>\r\n    <div class=\"box4\"><\/div>\r\n    <div class=\"box5\"><\/div>\r\n    <div class=\"box6\"><\/div>\r\n<\/body>\r\n\r\n<\/html><\/pre>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » \u7528css3\u4f2a\u7c7b\u753b\u56fe\u6807<\/a><\/p>","protected":false},"excerpt":{"rendered":"
<!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title><\/title […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[12,382,349],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2688"}],"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=2688"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2688\/revisions"}],"predecessor-version":[{"id":2689,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2688\/revisions\/2689"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2688"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2688"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}