{"id":2424,"date":"2017-12-30T18:32:13","date_gmt":"2017-12-30T10:32:13","guid":{"rendered":"http:\/\/www.xttblog.com\/?p=2424"},"modified":"2017-12-30T18:32:13","modified_gmt":"2017-12-30T10:32:13","slug":"css3%e5%ae%9e%e7%8e%b0%e6%89%93%e4%b9%92%e4%b9%93%e7%90%83%e6%b8%b8%e6%88%8f%e5%8a%a8%e7%94%bb%e6%95%88%e6%9e%9c","status":"publish","type":"post","link":"https:\/\/www.xttblog.com\/?p=2424","title":{"rendered":"CSS3\u5b9e\u73b0\u6253\u4e52\u4e53\u7403\u6e38\u620f\u52a8\u753b\u6548\u679c"},"content":{"rendered":"

\n\t\u7f51\u4e0a\u6709\u5f88\u591a\u5173\u4e8e CSS3<\/a> \u7684\u52a8\u753b\u6559\u7a0b\uff0c\u53ea\u8981\u5927\u5bb6\u5b66\u4f1a\u4e86\u6700\u57fa\u672c\u7684\u52a8\u753b\u77e5\u8bc6\uff0c\u4efb\u4f55\u6709\u96be\u5ea6\u7684\u52a8\u753b\u6548\u679c\u90fd\u53ef\u4ee5\u8f7b\u677e\u7684\u5b9e\u73b0\u3002\u4eca\u5929\u4e3a\u5927\u5bb6\u5206\u4eab\u4e00\u6b3e\u7b80\u6613\u7684\u6253\u4e52\u4e53\u7403\u52a8\u753b\u3002\n<\/p>\n

\n\t\u8be5\u52a8\u753b\u5168\u90e8\u7531 CSS3<\/a> \u5b9e\u73b0\u7684\u4e52\u4e53\u7403\u52a8\u753b\u7279\u6548\uff0c\u4e3b\u8981\u662f\u6a21\u62df\u4e86\u4e52\u4e53\u7403\u8fd0\u52a8\u52a8\u753b\uff0c\u753b\u9762\u4e0a\u7528 CSS3<\/a> \u7ed8\u5236\u4e86\u4e00\u5f20\u4e52\u4e53\u7403\u684c\uff0c\u4e00\u4e2a\u4e52\u4e53\u7403\u5728\u7403\u684c\u4e0a\u6765\u56de\u8fd0\u52a8\uff0c\u5c31\u597d\u8c61\u4e24\u4e2a\u8fd0\u52a8\u5458\u5728\u6253\u4e52\u4e53\u7403\u4e00\u6837\u3002\u5f53\u7136\u5982\u679c\u4f60\u53ef\u4ee5\u5728\u7403\u684c\u4e24\u7aef\u7ed8\u5236\u4e24\u4e2a\u8fd0\u52a8\u5458\u90a3\u5c31\u66f4\u52a0\u903c\u771f\u7684\u3002\n<\/p>\n

\n\t\u8be5\u52a8\u753b\u7684\u9759\u6001\u56fe\u6548\u679c\u5982\u4e0b\uff1a\n<\/p>\n

\n\t\"CSS3\u4e52\u4e53\u7403\u52a8\u753b\"\n<\/p>\n

\n\t\u9875\u9762html\u4ee3\u7801\u5982\u4e0b\uff1a\n<\/p>\n

\r\n<!DOCTYPE html>\r\n<html lang="en" >\r\n<head>\r\n  <meta charset="UTF-8">\r\n  <title>\u7eafCSS3\u4e52\u4e53\u7403\u52a8\u753bDEMO\u6f14\u793a<\/title>\r\n  <link rel="stylesheet" href="css\/style.css">\r\n<\/head>\r\n<body>\r\n<div id="pingpong">\r\n    <div id="table">\r\n        <div id="line"><\/div> \r\n        <div id="net-top"><\/div>  \r\n        <div id="net-middle"><\/div>  \r\n        <div id="net-bottom"><\/div>  \r\n        <div id="net-shadow"><\/div>      \r\n    <\/div>\r\n<!-- www.xttblog.com -->\r\n    <div id="c1">\r\n        <div id="b1"><\/div>   \r\n    <\/div>\r\n    <div id="c2">\r\n        <div id="b2"><\/div>   \r\n    <\/div>\r\n    <div id="c3">\r\n        <div id="b3"><\/div>   \r\n    <\/div>\r\n    <div id="c4">\r\n        <div id="b4"><\/div>   \r\n    <\/div>\r\n    <span id="ping">PING<\/span>\r\n    <span id="pong">PONG<\/span>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
\n\tstyle.css \u4ee3\u7801\u5982\u4e0b\uff1a\n<\/p>\n
\r\n@import url(https:\/\/fonts.googleapis.com\/css?family=Chewy);\r\nbody {\r\n    background: #7FA3C7;\r\n    font-family: 'Chewy', cursive;\r\n    text-align: center;\r\n    font-size: 50px;\r\n    color: white;\r\n    overflow: hidden;\r\n}\r\n#ping {\r\n    position: absolute;\r\n    top: 30px;\r\n    left: -80px;\r\n    opacity: 0;\r\n    animation: animPing 2s linear infinite; \r\n}\r\n#pong {\r\n    position: absolute;\r\n    top: 30px;\r\n    right: -90px;\r\n    opacity: 0;\r\n    animation: animPing 2s 1s linear infinite; \r\n}\r\n@keyframes animPing {\r\n    0% {\r\n        opacity: 0.8;\r\n    }\r\n    35%, 100% {\r\n        opacity: 0;\r\n    }\r\n}\r\n#pingpong {\r\n    margin: 0 auto;\r\n    margin-top: 100px;\r\n    position: relative;\r\n    width: 380px;\r\n    height: 150px;   \r\n}\r\n#table {\r\n    position: absolute;\r\n    top: 30px;\r\n    left: 0px;\r\n    border-bottom: 80px solid #fff;\r\n    border-left: 80px solid transparent;\r\n    border-right: 80px solid transparent;\r\n    height: 0;\r\n    width: 220px;\r\n}\r\n    #table:before {\r\n        display: block;\r\n        content: ' ';\r\n        position: absolute;\r\n        top: 1px;\r\n        left: -78px;\r\n        border-bottom: 78px solid #2E4E80;\r\n        border-left: 78px solid transparent;\r\n        border-right: 78px solid transparent;\r\n        height: 0;\r\n        width: 220px;\r\n    }\r\n    #table:after {\r\n        display: block;\r\n        content: ' ';\r\n        position: absolute;\r\n        top: 80px;\r\n        left: -80px;\r\n        height: 20px;\r\n        width: 380px;\r\n        background: #192A44;\r\n    }\r\n    #line {\r\n        position: absolute;\r\n        width: 280px;\r\n        top: 30px;\r\n        left: -30px;\r\n        border-bottom: solid 1px white;\r\n    }\r\n    \r\n    #net-top {\r\n        position: absolute;\r\n        top: -25px;\r\n        margin-left: 106px;\r\n        margin-right: 106px;\r\n        width: 8px;\r\n        height: 25px;\r\n        background: #333;\r\n    }\r\n        #net-top:before {\r\n            display: block;\r\n            content: " ";\r\n            position: absolute;\r\n            \r\n            top: -3px;\r\n            width: 4px;\r\n            border-left: solid 2px transparent;\r\n            border-right: solid 2px transparent;\r\n            border-bottom: solid 3px rgb(115, 115, 115);            \r\n        }\r\n    #net-middle {\r\n        position: absolute;\r\n        top: -20px;\r\n        left: 109px;\r\n        width: 2px;\r\n        height: 80px;\r\n        background: white;\r\n    }\r\n    #net-bottom {\r\n        position: absolute;\r\n        top: 65px;\r\n        left: 104px;\r\n        width: 12px;\r\n        height: 43px;\r\n        background: #333;      \r\n        z-index: 1;\r\n    }\r\n        #net-bottom:before {\r\n            display: block;\r\n            content: " ";\r\n            position: absolute;\r\n            \r\n            top: -8px;\r\n            width: 10px;\r\n            border-left: solid 1px transparent;\r\n            border-right: solid 1px transparent;\r\n            border-bottom: solid 8px rgb(115, 115, 115);            \r\n        }\r\n    #net-shadow {\r\n        position: absolute;\r\n        left: 111px;\r\n        border-bottom: 80px solid rgba(0, 0, 0, 0.2);\r\n        border-right: 30px solid transparent;\r\n        height: 0;\r\n        width: 20px;\r\n    }\r\n\r\n#c1, #c2 {\r\n    position: absolute;\r\n    width: 300px;\r\n    height: 300px;\r\n}\r\n#c3, #c4 {\r\n    position: absolute;\r\n    width: 150px;\r\n    height: 150px;\r\n}\r\n#c1 {\r\n    top: 0;\r\n    left: 0;\r\n    animation: rotateC1 2s linear infinite; \r\n}\r\n#c2 {\r\n    top: 0;\r\n    left: 80px;\r\n    animation: rotateC2 2s linear infinite;\r\n}\r\n#c3 {\r\n    top: 40px;\r\n    left: -10px;\r\n    animation: rotateC3 2s linear infinite;\r\n}\r\n#c4 {\r\n    top: 40px;\r\n    right: -10px;\r\n    animation: rotateC4 2s linear infinite;\r\n}\r\n@keyframes rotateC1 {\r\n    0% {\r\n        opacity: 1;\r\n        transform: rotate(-44deg);  \r\n    }\r\n    35% {\r\n        opacity: 1;\r\n        transform: rotate(52deg);\r\n    }\r\n    36%, 100% {\r\n        opacity: 0;\r\n    }\r\n}\r\n@keyframes rotateC2 {\r\n    0%, 49% {\r\n        opacity: 0;\r\n    }\r\n    50% {\r\n        opacity: 1;\r\n        transform: rotate(44deg); \r\n    }\r\n    85% {\r\n        opacity: 1;\r\n        transform: rotate(-52deg); \r\n    }\r\n    86%, 100% {\r\n        opacity: 0;\r\n    }\r\n}\r\n@keyframes rotateC3 {\r\n     0%, 84% {\r\n        opacity: 0;\r\n    }\r\n    85% {\r\n        opacity: 1;\r\n        transform: rotate(39deg);\r\n    }\r\n    100% {\r\n        opacity: 1;\r\n        transform: rotate(-15deg);\r\n    }\r\n}\r\n@keyframes rotateC4 {\r\n    0%, 34% {\r\n        opacity: 0;\r\n    }\r\n    35% {\r\n        opacity: 1;\r\n        transform: rotate(-39deg);\r\n    }\r\n    50% {\r\n        opacity: 1;\r\n        transform: rotate(15deg);\r\n    }\r\n    51%, 100% {\r\n        opacity: 0;\r\n    }\r\n}\r\n\r\n#b1, #b2, #b3, #b4 {\r\n    position: absolute;\r\n    width: 10px;\r\n    height: 10px;\r\n    background: white;\r\n    border-radius: 10px;\r\n}\r\n#b1, #b2 {    \r\n    top: -5px;\r\n    left: 145px;\r\n}\r\n#b3, #b4 {    \r\n    top: -5px;\r\n    left: 70px;\r\n}<\/pre>\n
\n\t\u6574\u4e2a\u52a8\u753b\u7684\u6e90\u4ee3\u7801\u4e0d\u52302kb\uff0c\u6ca1\u6709\u4e00\u4e2a\u56fe\u7247\uff0c\u5168\u90e8\u7531 CSS3<\/a> \u5b9e\u73b0\u3002<\/p>\n
\"\u4e1a\u4f59\u8349\u516c\u4f17\u53f7\"\/<\/p>
\u6700\u540e\uff0c\u6b22\u8fce\u5173\u6ce8\u6211\u7684\u4e2a\u4eba\u5fae\u4fe1\u516c\u4f17\u53f7\uff1a\u4e1a\u4f59\u8349\uff08yyucao\uff09\uff01\u53ef\u52a0\u4f5c\u8005\u5fae\u4fe1\u53f7\uff1axttblog2<\/font>\u3002\u5907\u6ce8\uff1a\u201c1\u201d\uff0c\u6dfb\u52a0\u535a\u4e3b\u5fae\u4fe1\u62c9\u4f60\u8fdb\u5fae\u4fe1\u7fa4\u3002\u5907\u6ce8\u9519\u8bef\u4e0d\u4f1a\u540c\u610f\u597d\u53cb\u7533\u8bf7\u3002<\/b>\u518d\u6b21\u611f\u8c22\u60a8\u7684\u5173\u6ce8\uff01\u540e\u7eed\u6709\u7cbe\u5f69\u5185\u5bb9\u4f1a\u7b2c\u4e00\u65f6\u95f4\u53d1\u7ed9\u60a8\uff01\u539f\u521b\u6587\u7ae0\u6295\u7a3f\u8bf7\u53d1\u9001\u81f3532009913@qq.com\u90ae\u7bb1\u3002\u5546\u52a1\u5408\u4f5c\u4e5f\u53ef\u6dfb\u52a0\u4f5c\u8005\u5fae\u4fe1\u8fdb\u884c\u8054\u7cfb\uff01<\/p>
\u672c\u6587\u539f\u6587\u51fa\u5904\uff1a\u4e1a\u4f59\u8349<\/a>\uff1a » CSS3\u5b9e\u73b0\u6253\u4e52\u4e53\u7403\u6e38\u620f\u52a8\u753b\u6548\u679c<\/a><\/p>","protected":false},"excerpt":{"rendered":"
\u7f51\u4e0a\u6709\u5f88\u591a\u5173\u4e8e CSS3 \u7684\u52a8\u753b\u6559\u7a0b\uff0c\u53ea\u8981\u5927\u5bb6\u5b66\u4f1a\u4e86\u6700\u57fa\u672c\u7684\u52a8\u753b\u77e5\u8bc6\uff0c\u4efb\u4f55\u6709\u96be\u5ea6\u7684\u52a8\u753b\u6548\u679c\u90fd\u53ef\u4ee5\u8f7b\u677e\u7684\u5b9e\u73b0\u3002\u4eca […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[149,814,117,234,119],"class_list":["post-2424","post","type-post","status-publish","format-standard","hentry","category-html5","tag-keyframes","tag-css3","tag-html5"],"_links":{"self":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/2424","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2424"}],"version-history":[{"count":1,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/2424\/revisions"}],"predecessor-version":[{"id":2425,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/2424\/revisions\/2425"}],"wp:attachment":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2424"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2424"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2424"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}