{"id":5113,"date":"2020-01-21T11:39:45","date_gmt":"2020-01-21T03:39:45","guid":{"rendered":"https:\/\/blog.naibabiji.com\/?p=5113"},"modified":"2020-01-21T11:39:45","modified_gmt":"2020-01-21T03:39:45","slug":"deng-long","status":"publish","type":"post","link":"https:\/\/blog.naibabiji.com\/files\/deng-long.html","title":{"rendered":"\u4f7f\u7528css3\u548chtml\u7ed9\u7f51\u7ad9\u6dfb\u52a0\u4e0a\u6625\u8282\u706f\u7b3c\u7279\u6548\u7684\u6e90\u7801\u5206\u4eab"},"content":{"rendered":"

\u9a6c\u4e0a\u5c31\u8fc7\u5e74\u4e86\uff0c\u7f51\u7ad9\u4e5f\u53ef\u4ee5\u88c5\u9970\u4e00\u4e0b\uff0c\u672c\u6587\u5c31\u6559\u5927\u5bb6\u5982\u4f55\u4f7f\u7528css\u548chtml\u4ee3\u7801\u7ed9\u4f60\u7f51\u7ad9\u6dfb\u52a0\u4e0a\u4e00\u5bf9\u65b0\u5e74\u706f\u7b3c\u3002\u5c31\u50cf\u5976\u7238\u5efa\u7ad9\u7b14\u8bb0\u8fd9\u6837\u3002<\/p>\n

\"\u7f51\u9875\u706f\u7b3c\u88c5\u9970\"<\/a><\/p>\n

\u8fd9\u4e2a\u706f\u7b3c\u7279\u6548\u53ef\u4ee5\u52a0\u5230\u4efb\u4f55\u7f51\u7ad9\u4e0a\u9762\uff0c\u4e0d\u7ba1\u4f60\u662f\u4e0d\u662f\u7528\u7684WordPress\u642d\u5efa\u7684\u7f51\u7ad9\u90fd\u53ef\u4ee5\u3002<\/p>\n

\u5177\u4f53\u7684\u65b9\u6cd5\u5982\u4e0b\uff1a<\/strong><\/p>\n

1\u3001\u590d\u5236\u4e0b\u9762\u7684\u4ee3\u7801\u6dfb\u52a0\u5230\u7f51\u7ad9\u7684\u9875\u811a\u6587\u4ef6\u3002<\/p>\n

<!-- \u706f\u7b3c1 -->\r\n<div class=\"deng-box\">\r\n\t<div class=\"deng\">\r\n\t\t<div class=\"xian\"><\/div>\r\n\t\t<div class=\"deng-a\">\r\n\t\t\t<div class=\"deng-b\"><div class=\"deng-t\">\u8282<\/div><\/div>\r\n\t\t<\/div>\r\n\t\t<div class=\"shui shui-a\"><div class=\"shui-c\"><\/div><div class=\"shui-b\"><\/div><\/div>\r\n\t<\/div>\r\n<\/div>\r\n \r\n<!-- \u706f\u7b3c2 -->\r\n<div class=\"deng-box1\">\r\n\t<div class=\"deng\">\r\n\t\t<div class=\"xian\"><\/div>\r\n\t\t<div class=\"deng-a\">\r\n\t\t\t<div class=\"deng-b\"><div class=\"deng-t\">\u6625<\/div><\/div>\r\n\t\t<\/div>\r\n\t\t<div class=\"shui shui-a\"><div class=\"shui-c\"><\/div><div class=\"shui-b\"><\/div><\/div>\r\n\t<\/div>\r\n<\/div><\/pre>\n
2\u3001\u590d\u5236\u4e0b\u9762\u7684css\u4ee3\u7801\u6dfb\u52a0\u5230\u4f60\u7f51\u7ad9\u4e0a\u9762\u3002<\/p>\n
.deng-box {\r\n\tposition: fixed;\r\n\ttop: -40px;\r\n\tright: -20px;\r\n\tz-index: 999;\r\n}\r\n \r\n.deng-box1 {\r\n\tposition: fixed;\r\n\ttop: -30px;\r\n\tright: 10px;\r\n\tz-index: 999;\r\n}\r\n \r\n.deng-box1 .deng {\r\n\tposition: relative;\r\n\twidth: 120px;\r\n\theight: 90px;\r\n\tmargin: 50px;\r\n\tbackground: #d8000f;\r\n\tbackground: rgba(216, 0, 15, 0.8);\r\n\tborder-radius: 50% 50%;\r\n\t-webkit-transform-origin: 50% -100px;\r\n\t-webkit-animation: swing 5s infinite ease-in-out;\r\n\tbox-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);\r\n}\r\n \r\n.deng {\r\n\tposition: relative;\r\n\twidth: 120px;\r\n\theight: 90px;\r\n\tmargin: 50px;\r\n\tbackground: #d8000f;\r\n\tbackground: rgba(216, 0, 15, 0.8);\r\n\tborder-radius: 50% 50%;\r\n\t-webkit-transform-origin: 50% -100px;\r\n\t-webkit-animation: swing 3s infinite ease-in-out;\r\n\tbox-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);\r\n}\r\n \r\n.deng-a {\r\n\twidth: 100px;\r\n\theight: 90px;\r\n\tbackground: #d8000f;\r\n\tbackground: rgba(216, 0, 15, 0.1);\r\n\tmargin: 12px 8px 8px 8px;\r\n\tborder-radius: 50% 50%;\r\n\tborder: 2px solid #dc8f03;\r\n}\r\n \r\n.deng-b {\r\n\twidth: 45px;\r\n\theight: 90px;\r\n\tbackground: #d8000f;\r\n\tbackground: rgba(216, 0, 15, 0.1);\r\n\tmargin: -4px 8px 8px 26px;\r\n\tborder-radius: 50% 50%;\r\n\tborder: 2px solid #dc8f03;\r\n}\r\n \r\n.xian {\r\n\tposition: absolute;\r\n\ttop: -20px;\r\n\tleft: 60px;\r\n\twidth: 2px;\r\n\theight: 20px;\r\n\tbackground: #dc8f03;\r\n}\r\n \r\n.shui-a {\r\n\tposition: relative;\r\n\twidth: 5px;\r\n\theight: 20px;\r\n\tmargin: -5px 0 0 59px;\r\n\t-webkit-animation: swing 4s infinite ease-in-out;\r\n\t-webkit-transform-origin: 50% -45px;\r\n\tbackground: #ffa500;\r\n\tborder-radius: 0 0 5px 5px;\r\n}\r\n \r\n.shui-b {\r\n\tposition: absolute;\r\n\ttop: 14px;\r\n\tleft: -2px;\r\n\twidth: 10px;\r\n\theight: 10px;\r\n\tbackground: #dc8f03;\r\n\tborder-radius: 50%;\r\n}\r\n \r\n.shui-c {\r\n\tposition: absolute;\r\n\ttop: 18px;\r\n\tleft: -2px;\r\n\twidth: 10px;\r\n\theight: 35px;\r\n\tbackground: #ffa500;\r\n\tborder-radius: 0 0 0 5px;\r\n}\r\n \r\n.deng:before {\r\n\tposition: absolute;\r\n\ttop: -7px;\r\n\tleft: 29px;\r\n\theight: 12px;\r\n\twidth: 60px;\r\n\tcontent: \" \";\r\n\tdisplay: block;\r\n\tz-index: 999;\r\n\tborder-radius: 5px 5px 0 0;\r\n\tborder: solid 1px #dc8f03;\r\n\tbackground: #ffa500;\r\n\tbackground: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);\r\n}\r\n \r\n.deng:after {\r\n\tposition: absolute;\r\n\tbottom: -7px;\r\n\tleft: 10px;\r\n\theight: 12px;\r\n\twidth: 60px;\r\n\tcontent: \" \";\r\n\tdisplay: block;\r\n\tmargin-left: 20px;\r\n\tborder-radius: 0 0 5px 5px;\r\n\tborder: solid 1px #dc8f03;\r\n\tbackground: #ffa500;\r\n\tbackground: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);\r\n}\r\n \r\n.deng-t {\r\n\tfont-family: \u534e\u6587\u884c\u6977,Arial,Lucida Grande,Tahoma,sans-serif;\r\n\tfont-size: 3.2rem;\r\n\tcolor: #dc8f03;\r\n\tfont-weight: bold;\r\n\tline-height: 85px;\r\n\ttext-align: center;\r\n}\r\n \r\n.night .deng-t, \r\n.night .deng-box, \r\n.night .deng-box1 {\r\n\tbackground: transparent !important;\r\n}\r\n \r\n@-moz-keyframes swing {\r\n\t0% {\r\n\t\t-moz-transform: rotate(-10deg)\r\n\t}\r\n \r\n\t50% {\r\n\t\t-moz-transform: rotate(10deg)\r\n\t}\r\n \r\n\t100% {\r\n\t\t-moz-transform: rotate(-10deg)\r\n\t}\r\n}\r\n \r\n@-webkit-keyframes swing {\r\n\t0% {\r\n\t\t-webkit-transform: rotate(-10deg)\r\n\t}\r\n \r\n\t50% {\r\n\t\t-webkit-transform: rotate(10deg)\r\n\t}\r\n \r\n\t100% {\r\n\t\t-webkit-transform: rotate(-10deg)\r\n\t}\r\n}<\/pre>\n
\u4fdd\u5b58\u5b8c\u6bd5\uff0c\u5237\u65b0\u524d\u53f0\u5c31\u53ef\u4ee5\u770b\u5230\u6548\u679c\u4e86\u3002<\/p>\n
\u4ee5\u4e0a\u4ee3\u7801\u6765\u81ea\u77e5\u66f4\u9e1f<\/a><\/p>\n\n\n
\n            \n
\n    \n
\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n    <\/div>\n    \n
\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n
\n            4.7\/5 - (3 votes)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"
\u9a6c\u4e0a\u5c31\u8fc7\u5e74\u4e86\uff0c\u7f51\u7ad9\u4e5f\u53ef\u4ee5\u88c5\u9970\u4e00\u4e0b\uff0c\u672c\u6587\u5c31\u6559\u5927\u5bb6\u5982\u4f55\u4f7f\u7528css\u548chtml\u4ee3\u7801\u7ed9\u4f60\u7f51\u7ad9\u6dfb\u52a0\u4e0a\u4e00\u5bf9\u65b0\u5e74\u706f\u7b3c\u3002\u5c31\u50cf\u5976\u7238 […]<\/p>\n","protected":false},"author":1,"featured_media":5115,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"slim_seo":{"title":"\u4f7f\u7528css3\u548chtml\u7ed9\u7f51\u7ad9\u6dfb\u52a0\u4e0a\u6625\u8282\u706f\u7b3c\u7279\u6548\u7684\u6e90\u7801\u5206\u4eab - \u5976\u7238\u5efa\u7ad9\u7b14\u8bb0","description":"\u9a6c\u4e0a\u5c31\u8fc7\u5e74\u4e86\uff0c\u7f51\u7ad9\u4e5f\u53ef\u4ee5\u88c5\u9970\u4e00\u4e0b\uff0c\u672c\u6587\u5c31\u6559\u5927\u5bb6\u5982\u4f55\u4f7f\u7528css\u548chtml\u4ee3\u7801\u7ed9\u4f60\u7f51\u7ad9\u6dfb\u52a0\u4e0a\u4e00\u5bf9\u65b0\u5e74\u706f\u7b3c\u3002\u5c31\u50cf\u5976\u7238\u5efa\u7ad9\u7b14\u8bb0\u8fd9\u6837\u3002 \u8fd9\u4e2a\u706f\u7b3c\u7279\u6548\u53ef\u4ee5\u52a0\u5230\u4efb\u4f55\u7f51\u7ad9\u4e0a\u9762\uff0c\u4e0d\u7ba1\u4f60\u662f\u4e0d\u662f\u7528\u7684WordPress\u642d\u5efa\u7684\u7f51\u7ad9\u90fd\u53ef\u4ee5\u3002 \u5177\u4f53\u7684\u65b9\u6cd5\u5982\u4e0b\uff1a 1\u3001\u590d\u5236\u4e0b\u9762\u7684\u4ee3\u7801\u6dfb\u52a0\u5230\u7f51\u7ad9\u7684\u9875\u811a\u6587\u4ef6\u3002 2\u3001\u590d\u5236\u4e0b\u9762\u7684css\u4ee3\u7801\u6dfb\u52a0\u5230\u4f60\u7f51\u7ad9\u4e0a\u9762\u3002 \u4fdd"},"footnotes":""},"categories":[140],"tags":[],"class_list":["post-5113","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-files"],"_links":{"self":[{"href":"https:\/\/blog.naibabiji.com\/wp-json\/wp\/v2\/posts\/5113","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.naibabiji.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.naibabiji.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.naibabiji.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.naibabiji.com\/wp-json\/wp\/v2\/comments?post=5113"}],"version-history":[{"count":0,"href":"https:\/\/blog.naibabiji.com\/wp-json\/wp\/v2\/posts\/5113\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.naibabiji.com\/wp-json\/wp\/v2\/media\/5115"}],"wp:attachment":[{"href":"https:\/\/blog.naibabiji.com\/wp-json\/wp\/v2\/media?parent=5113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.naibabiji.com\/wp-json\/wp\/v2\/categories?post=5113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.naibabiji.com\/wp-json\/wp\/v2\/tags?post=5113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}