{"id":2306,"date":"2024-08-01T15:39:28","date_gmt":"2024-08-01T07:39:28","guid":{"rendered":"https:\/\/sanlangcode.com\/?p=2306"},"modified":"2024-08-01T15:39:28","modified_gmt":"2024-08-01T07:39:28","slug":"%e5%b0%9d%e8%af%95%e5%ae%9e%e7%8e%b0%e4%b8%80%e7%a7%8d%e8%9e%ba%e9%92%bf%e6%95%88%e6%9e%9c%e7%9a%84css%e6%a0%b7%e5%bc%8f","status":"publish","type":"post","link":"https:\/\/sanlangcode.com\/index.php\/2024\/08\/01\/%e5%b0%9d%e8%af%95%e5%ae%9e%e7%8e%b0%e4%b8%80%e7%a7%8d%e8%9e%ba%e9%92%bf%e6%95%88%e6%9e%9c%e7%9a%84css%e6%a0%b7%e5%bc%8f\/","title":{"rendered":"\u5c1d\u8bd5\u5b9e\u73b0\u4e00\u79cdCSS\u6837\u5f0f\uff1a\u87ba\u94bf\u6548\u679c\u4e00"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/sanroimg.oss-cn-shanghai.aliyuncs.com\/img\/202408011539896.gif\" alt=\"\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n&lt;head>\n  &lt;meta charset=\"UTF-8\">\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  &lt;title>Mother of Pearl Effect&lt;\/title>\n  &lt;style>\n    body {\n      background-color: #ffffff; \/* \u9ed1\u8272\u80cc\u666f *\/\n      margin: 0;\n      height: 100vh;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .mother-of-pearl {\n      background: linear-gradient(45deg, rgba(255, 235, 255, 0.3), rgba(255, 255, 225, 0.3)),\n      linear-gradient(45deg, rgba(255, 0, 150, 1), rgba(0, 255, 255, 0.9), rgba(255, 255, 0, 0.9), rgba(255, 0, 150, 0.9));\n      background-size: 100%, 300% 300%;\n      animation: pearlescent 3s infinite ease-in-out;\n      border-radius: 12px; \/* \u66f4\u5706\u6da6\u7684\u5706\u89d2\u6548\u679c *\/\n      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); \/* \u66f4\u5f3a\u7684\u9634\u5f71\u6548\u679c *\/\n      color: #fff; \/* \u6587\u5b57\u989c\u8272 *\/\n      padding: 20px; \/* \u5185\u8fb9\u8ddd *\/\n      text-align: center; \/* \u6587\u5b57\u5c45\u4e2d *\/\n      font-size: 24px; \/* \u5b57\u4f53\u5927\u5c0f *\/\n      font-family: Arial, sans-serif; \/* \u5b57\u4f53 *\/\n      position: relative;\n      overflow: hidden; \/* \u786e\u4fdd\u5185\u5bb9\u4e0d\u6ea2\u51fa *\/\n    }\n\n    @keyframes pearlescent {\n      0% {\n        background-position: 0% 0%;\n      }\n      25% {\n        background-position: 90% 90%;\n      }\n      45% {\n        background-position: 190% 0%;\n      }\n      65% {\n        background-position: 0% 190%;\n      }\n      85% {\n        background-position: 0% 70%;\n      }\n      100% {\n        background-position: 0% 0%;\n      }\n    }\n  &lt;\/style>\n&lt;\/head>\n&lt;body>\n&lt;div class=\"mother-of-pearl\">\n  Mother of Pearl Effect\n&lt;\/div>\n&lt;\/body>\n&lt;\/html>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-2306","post","type-post","status-publish","format-standard","hentry","category-4"],"_links":{"self":[{"href":"https:\/\/sanlangcode.com\/index.php\/wp-json\/wp\/v2\/posts\/2306","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sanlangcode.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sanlangcode.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sanlangcode.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sanlangcode.com\/index.php\/wp-json\/wp\/v2\/comments?post=2306"}],"version-history":[{"count":0,"href":"https:\/\/sanlangcode.com\/index.php\/wp-json\/wp\/v2\/posts\/2306\/revisions"}],"wp:attachment":[{"href":"https:\/\/sanlangcode.com\/index.php\/wp-json\/wp\/v2\/media?parent=2306"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sanlangcode.com\/index.php\/wp-json\/wp\/v2\/categories?post=2306"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sanlangcode.com\/index.php\/wp-json\/wp\/v2\/tags?post=2306"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}