{"id":1574,"date":"2021-02-09T00:06:40","date_gmt":"2021-02-08T16:06:40","guid":{"rendered":"https:\/\/maofun.com\/?p=1574"},"modified":"2021-02-09T00:06:40","modified_gmt":"2021-02-08T16:06:40","slug":"%e7%bb%99%e4%bd%a0%e7%9a%84%e5%8d%9a%e5%ae%a2%e6%8c%82%e4%b8%8a%e4%b8%a4%e4%b8%aa%e5%a4%a7%e7%ba%a2%e7%81%af%e7%ac%bc","status":"publish","type":"post","link":"https:\/\/maofun.com\/1574.html","title":{"rendered":"\u7ed9\u4f60\u7684\u535a\u5ba2\u6302\u4e0a\u4e24\u4e2a\u5927\u7ea2\u706f\u7b3c"},"content":{"rendered":"<div class=\"content index width mx-auto px3 my3\">\n<section id=\"wrapper\" class=\"home\">\n<article class=\"post\">\n<div id=\"post-content\" class=\"content\">\n<h2><a name=\"cl-1\"><\/a>\u524d\u8a00<\/h2>\n<p>\u5c31\u662f\u6211\u535a\u5ba2\u4e0a\u8fd9\u4e24\u4e2a\u706f\u7b3c\uff08\u5e74\u8fc7\u5b8c\u5c31\u6536\u8d77\u6765\u4e86\uff09\uff0c\u662f\u4e0d\u662f\u5f88\u559c\u5e86\uff0c\u867d\u7136\u6625\u8282\u5feb\u7ed3\u675f\u4e86\uff0c\u4f46\u662f\u53ef\u4ee5\u6536\u8d77\u6765\u660e\u5e74\u518d\u6302\u3002\n<a title=\"\" href=\"https:\/\/maofun.com\/wp-content\/uploads\/2021\/02\/8a50f-14-1.jpg\" data-lightbox=\"roadtrip\" loading=\"lazy\" rel=\"sponsored\" data-fancybox=\"gallery\"><img decoding=\"async\" src=\"https:\/\/maofun.com\/wp-content\/uploads\/2021\/02\/8a50f-14-1.jpg\" \/ alt=\"\u7ed9\u4f60\u7684\u535a\u5ba2\u6302\u4e0a\u4e24\u4e2a\u5927\u7ea2\u706f\u7b3c - \u7b2c1\u5f20\u56fe\u7247\" title=\"\u7ed9\u4f60\u7684\u535a\u5ba2\u6302\u4e0a\u4e24\u4e2a\u5927\u7ea2\u706f\u7b3c - \u7b2c1\u5f20\u56fe\u7247 | \u732b\u996d\" ><\/a><\/p>\n<h2><a name=\"cl-2\"><\/a>\u4ee3\u7801<\/h2>\n<p>1.\u8fd9\u90e8\u5206\u653e\u5728<code>footer.php<\/code>\u91cc<\/p>\n<pre><code> &lt;div class=\"deng-box\"&gt;\r\n    &lt;div class=\"deng\"&gt;\r\n        &lt;div class=\"xian\"&gt;&lt;\/div&gt;\r\n        &lt;div class=\"deng-a\"&gt;\r\n            &lt;div class=\"deng-b\"&gt;&lt;div class=\"deng-t\"&gt;\u6625\u8282&lt;\/div&gt;&lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"shui shui-a\"&gt;&lt;div class=\"shui-c\"&gt;&lt;\/div&gt;&lt;div class=\"shui-b\"&gt;&lt;\/div&gt;&lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n \r\n&lt;div class=\"deng-box1\"&gt;\r\n    &lt;div class=\"deng\"&gt;\r\n        &lt;div class=\"xian\"&gt;&lt;\/div&gt;\r\n        &lt;div class=\"deng-a\"&gt;\r\n            &lt;div class=\"deng-b\"&gt;&lt;div class=\"deng-t\"&gt;\u5feb\u4e50&lt;\/div&gt;&lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"shui shui-a\"&gt;&lt;div class=\"shui-c\"&gt;&lt;\/div&gt;&lt;div class=\"shui-b\"&gt;&lt;\/div&gt;&lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<p>2.\u8fd9\u90e8\u5206\u653e\u5728<code>style.css<\/code>\u91cc<\/p>\n<pre><code>.deng-box {\r\n    position: fixed;\r\n    top: -30px;\r\n    left: 220px;\r\n    z-index: 9999;\r\n    pointer-events: none;\r\n}\r\n \r\n.deng-box1 {\r\n    position: fixed;\r\n    top: -30px;\r\n    right: 222px;\r\n    z-index: 9999;\r\n    pointer-events: none;\r\n}\r\n\r\n.deng-box1 .deng {\r\n    position: relative;\r\n    width: 120px;\r\n    height: 90px;\r\n    margin: 50px;\r\n    background: #d8000f;\r\n    background: rgba(216, 0, 15, 0.8);\r\n    border-radius: 50% 50%;\r\n    -webkit-transform-origin: 50% -100px;\r\n    -webkit-animation: swing 5s infinite ease-in-out;\r\n    box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);\r\n}\r\n\r\n.deng {\r\n    position: relative;\r\n    width: 120px;\r\n    height: 90px;\r\n    margin: 50px;\r\n    background: #d8000f;\r\n    background: rgba(216, 0, 15, 0.8);\r\n    border-radius: 50% 50%;\r\n    -webkit-transform-origin: 50% -100px;\r\n    -webkit-animation: swing 3s infinite ease-in-out;\r\n    box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);\r\n}\r\n\r\n.deng-a {\r\n    width: 100px;\r\n    height: 90px;\r\n    background: #d8000f;\r\n    background: rgba(216, 0, 15, 0.1);\r\n    margin: 12px 8px 8px 10px;\r\n    border-radius: 50% 50%;\r\n    border: 2px solid #dc8f03;\r\n}\r\n\r\n.deng-b {\r\n    width: 45px;\r\n    height: 90px;\r\n    background: #d8000f;\r\n    background: rgba(216, 0, 15, 0.1);\r\n    margin: -2px 8px 8px 26px;\r\n    border-radius: 50% 50%;\r\n    border: 2px solid #dc8f03;\r\n}\r\n\r\n.xian {\r\n    position: absolute;\r\n    top: -20px;\r\n    left: 60px;\r\n    width: 2px;\r\n    height: 20px;\r\n    background: #dc8f03;\r\n}\r\n\r\n.shui-a {\r\n    position: relative;\r\n    width: 5px;\r\n    height: 20px;\r\n    margin: -5px 0 0 59px;\r\n    -webkit-animation: swing 4s infinite ease-in-out;\r\n    -webkit-transform-origin: 50% -45px;\r\n    background: #ffa500;\r\n    border-radius: 0 0 5px 5px;\r\n}\r\n\r\n.shui-b {\r\n    position: absolute;\r\n    top: 14px;\r\n    left: -2px;\r\n    width: 10px;\r\n    height: 10px;\r\n    background: #dc8f03;\r\n    border-radius: 50%;\r\n}\r\n\r\n.shui-c {\r\n    position: absolute;\r\n    top: 18px;\r\n    left: -2px;\r\n    width: 10px;\r\n    height: 35px;\r\n    background: #ffa500;\r\n    border-radius: 0 0 0 5px;\r\n}\r\n\r\n.deng:before {\r\n    position: absolute;\r\n    top: -7px;\r\n    left: 29px;\r\n    height: 12px;\r\n    width: 60px;\r\n    content: \" \";\r\n    display: block;\r\n    z-index: 999;\r\n    border-radius: 5px 5px 0 0;\r\n    border: solid 1px #dc8f03;\r\n    background: #ffa500;\r\n    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);\r\n}\r\n\r\n.deng:after {\r\n    position: absolute;\r\n    bottom: -7px;\r\n    left: 10px;\r\n    height: 12px;\r\n    width: 60px;\r\n    content: \" \";\r\n    display: block;\r\n    margin-left: 20px;\r\n    border-radius: 0 0 5px 5px;\r\n    border: solid 1px #dc8f03;\r\n    background: #ffa500;\r\n    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);\r\n}\r\n\r\n.deng-t {\r\n    font-family: \u534e\u6587\u884c\u6977,Arial,Lucida Grande,Tahoma,sans-serif;\r\n    font-size: 1.5rem;\r\n    color: #ffa500;\r\n    font-weight: bold;\r\n    line-height: 42px;\r\n    text-align: center;\r\n    width: 25px;  \r\n    margin: 0 auto;  \r\n     \r\n}\r\n\r\n.night .deng-t, \r\n.night .deng-box, \r\n.night .deng-box1 {\r\n    background: transparent !important;\r\n}\r\n\r\n@-moz-keyframes swing {\r\n    0% {\r\n        -moz-transform: rotate(-10deg)\r\n    }\r\n\r\n    50% {\r\n        -moz-transform: rotate(10deg)\r\n    }\r\n \r\n    100% {\r\n        -moz-transform: rotate(-10deg)\r\n    }\r\n}\r\n\r\n@-webkit-keyframes swing {\r\n    0% {\r\n        -webkit-transform: rotate(-10deg)\r\n    }\r\n\r\n    50% {\r\n        -webkit-transform: rotate(10deg)\r\n    }\r\n\r\n    100% {\r\n        -webkit-transform: rotate(-10deg)\r\n    }\r\n}\r\n<\/code><\/pre>\n<p>3.\u5982\u679c\u4e0d\u60f3\u5728\u624b\u673a\u7aef\u663e\u793a\u53ef\u4ee5\u52a0\u4e0a\u8fd9\u53e5<\/p>\n<pre><code>@media (max-width: 678px){.deng-box{display:none;}}\r\n@media (max-width: 678px){.deng-box1{display:none;}}<\/code><\/pre>\n<h2><a name=\"cl-3\"><\/a>\u540e\u8bb0<\/h2>\n<p>\u8fd9\u6837\u5c31\u6302\u597d\u4e86\u706f\u7b3c\uff0c\u5b57\u4f53\u548c\u4f4d\u7f6e\u7b49\u53ef\u4ee5\u81ea\u5df1\u5728CSS\u91cc\u4fee\u6539\uff0c\u6bcf\u4e2a\u4e3b\u9898\u4e0d\u4e00\u6837\uff0c\u6539\u6210\u9002\u5408\u81ea\u5df1\u7684\u5c31\u884c\u3002<\/p>\n<\/div>\n<\/article>\n<\/section>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u524d\u8a00 \u5c31\u662f\u6211\u535a\u5ba2\u4e0a\u8fd9\u4e24\u4e2a\u706f\u7b3c\uff08\u5e74\u8fc7\u5b8c\u5c31\u6536\u8d77\u6765\u4e86\uff09\uff0c\u662f\u4e0d\u662f\u5f88\u559c\u5e86\uff0c\u867d\u7136\u6625\u8282\u5feb\u7ed3\u675f\u4e86\uff0c\u4f46\u662f\u53ef\u4ee5\u6536\u8d77\u6765\u660e\u5e74\u518d\u6302\u3002 \u4ee3\u7801 1.\u8fd9\u90e8\u5206\u653e\u5728footer.php\u91cc &lt;div class=&#8221;deng-box&#8221;&gt; &lt;div class=&#8221;deng&#8221;&gt; &lt;div class=&#8221;xian&#8221;&gt;&lt;\/div&gt; &lt;div class=&#8221;deng-a&#8221;&gt; &lt;div class=&#8221;deng-b&#8221;&gt;&lt;div class=&#8221;deng-t&#8221;&gt;\u6625\u8282&lt;\/div&gt;&lt;\/div&gt; &lt;\/div&gt; &lt;div class=&#8230;&#8230;<span class=\"read-more\"> <a href=\"https:\/\/maofun.com\/1574.html\"><\/p>\n<p>\u7ee7\u7eed\u9605\u8bfb&raquo;&raquo;&raquo;<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[221,400],"_links":{"self":[{"href":"https:\/\/maofun.com\/wp-json\/wp\/v2\/posts\/1574"}],"collection":[{"href":"https:\/\/maofun.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/maofun.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/maofun.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/maofun.com\/wp-json\/wp\/v2\/comments?post=1574"}],"version-history":[{"count":0,"href":"https:\/\/maofun.com\/wp-json\/wp\/v2\/posts\/1574\/revisions"}],"wp:attachment":[{"href":"https:\/\/maofun.com\/wp-json\/wp\/v2\/media?parent=1574"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/maofun.com\/wp-json\/wp\/v2\/categories?post=1574"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/maofun.com\/wp-json\/wp\/v2\/tags?post=1574"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}