{"id":66,"date":"2024-12-18T00:34:53","date_gmt":"2024-12-17T16:34:53","guid":{"rendered":"http:\/\/blog.sayoung.xyz\/?p=66"},"modified":"2026-02-10T15:27:55","modified_gmt":"2026-02-10T07:27:55","slug":"%e5%ad%a6%e4%b9%a0%e6%97%a5%e5%bf%97%e8%bf%9b%e5%ba%a6%e6%9d%a1%e4%b8%8ecss%e5%8a%a8%e7%94%bb","status":"publish","type":"post","link":"https:\/\/blog.sayoung.wang\/index.php\/2024\/12\/18\/%e5%ad%a6%e4%b9%a0%e6%97%a5%e5%bf%97%e8%bf%9b%e5%ba%a6%e6%9d%a1%e4%b8%8ecss%e5%8a%a8%e7%94%bb\/","title":{"rendered":"\u5b66\u4e60\u65e5\u5fd7|\u8fdb\u5ea6\u6761\u4e0eCSS\u52a8\u753b"},"content":{"rendered":"\n<p>\u5728\u4e4b\u524d\u63d0\u5230\u7684\u9879\u76ee\u4e2d\u9700\u8981\u7528\u5230\u8fdb\u5ea6\u6761\u7684\u8bbe\u8ba1\uff0c\u4e8e\u662f\u53c8\u53bb\u91cd\u6e29<hm>\u91cd\u5b66<\/hm>\u4e86\u4e00\u904dCSS\u52a8\u753b\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><div class='fancybox-wrapper lazyload-container-unload' data-fancybox='post-images' href='https:\/\/blog.sayoung.wang\/wp-content\/uploads\/2024\/12\/7ca6b3eea83bdb43d55f6d7b9d4d994e.png'><img class=\"lazyload lazyload-style-1\" src=\"data:image\/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPgo8c3ZnIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmZmZmMDAiPjxnPjwvZz4KPC9zdmc+\"  loading=\"lazy\" decoding=\"async\" width=\"563\" height=\"120\" data-original=\"https:\/\/blog.sayoung.wang\/wp-content\/uploads\/2024\/12\/7ca6b3eea83bdb43d55f6d7b9d4d994e.png\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB\/AAffA0nNPuCLAAAAAElFTkSuQmCC\" alt=\"\" class=\"wp-image-67\"  sizes=\"auto, (max-width: 563px) 100vw, 563px\" \/><\/div><\/figure>\n\n\n\n<p>\u6240\u9700\u6548\u679c\u5982\u4e0a\u56fe\uff0c\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div style=\"width: 100%;border:2px solid;border-radius: 2px;\"&gt;\n\t\t\t\t\t\t\t\t\t\t&lt;div class=\"progress\"&gt;&lt;\/div&gt;\n\t\t\t\t\t\t\t\t\t&lt;\/div&gt;\n\n&lt;style&gt; \n.progress\n{\n\tborder-radius: 2px;\n\twidth:50%;\n\theight:20px;\n\tbackground-size: 50px 50px;\n\tbackground-image:linear-gradient(-45deg,black 0,black 25%,white 0,white 50%,black 0,black 75%,white 0,white 100%);\n\tanimation:progress-bar 10s infinite linear;\n\t-webkit-animation:progress-bar 10s infinite linear;\/* Safari and Chrome *\/\n}\n\n@-webkit-keyframes progress-bar \/* Safari and Chrome *\/\n{\n\tfrom {background-position:0 0;}\n\tto {background-position:600px 0;}\n}\n\n@keyframes progress-bar\n{\n\tfrom {background-position:0 0;}\n\tto {background-position:600px 0;}\n}\n\n&lt;\/style&gt;<\/code><\/pre>\n\n\n\n<p>\u4e0a\u8ff0\u4ee3\u7801\u53c2\u8003\u81ea<a href=\"https:\/\/blog.csdn.net\/Rao_Limon\/article\/details\/88176537\">https:\/\/blog.csdn.net\/Rao_Limon\/article\/details\/88176537<\/a><\/p>\n\n\n\n<p>\u4ee5\u4e0a\u4ee3\u7801\u5df2\u7ecf\u521d\u6b65\u5b9e\u73b0\u4e86\u8fdb\u5ea6\u6761\u7684\u529f\u80fd\uff0c\u53ea\u9700\u8c03\u6574width\u53c2\u6570\u4fbf\u53ef\u4ee5\u51b3\u5b9a\u8fdb\u5ea6\u6761\u7684\u957f\u5ea6\u3002\u4f46\u6211\u60f3\u5b9e\u73b0\u7684\u662f\u80fd\u591f\u663e\u793a\u5df2\u7ecf\u8fc7\u53bb\u7684\u65f6\u95f4\u7684\u6bd4\u4f8b\uff0c\u4e8e\u662f\u4e0ephp\u7ed3\u5408\u4e0b\u6709\u4e86\u5982\u4e0b\u4ee3\u7801\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n&lt;php\n\u2026\u2026                   \n$dateddl = $data&#91;'ddl'];\n$datest = $data&#91;'start_time'];\n$progress =round( (time() - strtotime($datest))\/(strtotime($dateddl) - strtotime($datest)) ,2);\/\/\u8ba1\u7b97\u6d41\u901d\u65f6\u95f4\u7684\u6bd4\u4f8b\u5e76\u4fdd\u7559\u4e24\u4f4d\u5c0f\u6570\nif($progress >= 1) {\n    $progress = 1;\n}elseif ($progress &lt;= 0) {\n    $progress = 0;\n}\/\/\u6392\u9664\u672a\u5f00\u59cb\u548c\u8d85\u65f6\u7684\u60c5\u51b5\n$progress = $progress*100;\/\/\u767e\u5206\u6bd4\n\u2026\u2026\necho '&lt;div style=\"width: 100%;border:2px solid;border-radius: 2px;\">\n   &lt;div class=\"progress\" style=\"width: '. htmlspecialchars($progress).'%\">&lt;\/div>\n&lt;\/div>';\n\u2026\u2026\n?><\/code><\/pre>\n<style>hm {\r\n    background-color: #252525;\r\n    color: #252525;\r\n    transition: color 0.5s;\r\n}\r\n\r\nhm:hover {\r\n    color: #ffffff;\r\n}<\/style>","protected":false},"excerpt":{"rendered":"<p>\u5728\u4e4b\u524d\u63d0\u5230\u7684\u9879\u76ee\u4e2d\u9700\u8981\u7528\u5230\u8fdb\u5ea6\u6761\u7684\u8bbe\u8ba1\uff0c\u4e8e\u662f\u53c8\u53bb\u91cd\u6e29\u91cd\u5b66\u4e86\u4e00\u904dCSS\u52a8\u753b\u3002 \u6240\u9700\u6548\u679c\u5982\u4e0a\u56fe\uff0c\u4ee3\u7801\u5982\u4e0b\uff1a \u4e0a\u8ff0\u4ee3 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[10,8],"class_list":["post-66","post","type-post","status-publish","format-standard","hentry","category-11","tag-css","tag-8"],"_links":{"self":[{"href":"https:\/\/blog.sayoung.wang\/index.php\/wp-json\/wp\/v2\/posts\/66","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.sayoung.wang\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.sayoung.wang\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.sayoung.wang\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.sayoung.wang\/index.php\/wp-json\/wp\/v2\/comments?post=66"}],"version-history":[{"count":2,"href":"https:\/\/blog.sayoung.wang\/index.php\/wp-json\/wp\/v2\/posts\/66\/revisions"}],"predecessor-version":[{"id":71,"href":"https:\/\/blog.sayoung.wang\/index.php\/wp-json\/wp\/v2\/posts\/66\/revisions\/71"}],"wp:attachment":[{"href":"https:\/\/blog.sayoung.wang\/index.php\/wp-json\/wp\/v2\/media?parent=66"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.sayoung.wang\/index.php\/wp-json\/wp\/v2\/categories?post=66"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.sayoung.wang\/index.php\/wp-json\/wp\/v2\/tags?post=66"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}