{"id":226,"date":"2025-12-05T20:13:46","date_gmt":"2025-12-05T12:13:46","guid":{"rendered":"https:\/\/caoxunyi.cn\/?p=226"},"modified":"2025-12-05T20:13:46","modified_gmt":"2025-12-05T12:13:46","slug":"%e7%ba%af-css-%e5%a4%8d%e5%88%bb-macos-%e4%b8%9d%e6%bb%91%e5%bc%b9%e7%aa%97%ef%bc%9a%e8%ae%a9%e4%bd%a0%e7%9a%84%e7%bd%91%e9%a1%b5%e6%8b%a5%e6%9c%89%e3%80%8c%e7%89%a9%e7%90%86%e8%b4%a8%e6%84%9f","status":"publish","type":"post","link":"https:\/\/caoxunyi.cn\/index.php\/226\/","title":{"rendered":"\u7eaf CSS \u590d\u523b macOS \u4e1d\u6ed1\u5f39\u7a97\uff1a\u8ba9\u4f60\u7684\u7f51\u9875\u62e5\u6709\u300c\u7269\u7406\u8d28\u611f\u300d"},"content":{"rendered":"

\u5728 Web \u5f00\u53d1\u4e2d\uff0c\u6211\u4eec\u5e38\u5e38\u8ffd\u6c42\u6781\u81f4\u7684 UI \u4f53\u9a8c\u3002\u800c macOS \u7684\u754c\u9762\u4e4b\u6240\u4ee5\u8ba9\u4eba\u611f\u5230\u6109\u60a6\uff0c\u5f88\u5927\u7a0b\u5ea6\u4e0a\u5f52\u529f\u4e8e\u5b83\u90a3\u7b26\u5408\u7269\u7406\u76f4\u89c9<\/strong>\u7684\u5fae\u4ea4\u4e92\u52a8\u753b\u3002<\/p>\n

\u5f53\u4f60\u6253\u5f00\u4e00\u4e2a\u5f39\u7a97\u65f6\uff0c\u5b83\u4e0d\u662f\u673a\u68b0\u5730\u201c\u51fa\u73b0\u201d\uff0c\u800c\u662f\u50cf\u679c\u51bb\u4e00\u6837\u5f39\u51fa\u6765\uff08Spring Animation\uff09\uff0c\u80cc\u666f\u968f\u4e4b\u6a21\u7cca\uff08Frosted Glass\uff09\u3002\u8fd9\u79cd\u201c\u7075\u52a8\u611f\u201d\u80fd\u6781\u5927\u5730\u63d0\u5347\u7528\u6237\u7684\u64cd\u4f5c\u4f53\u9a8c\u3002<\/p>\n

\u4eca\u5929\uff0c\u6211\u4eec\u5c31\u6765\u89e3\u6784\u8fd9\u79cd\u6548\u679c\uff0c\u5e76\u7528\u7eaf CSS\uff08\u914d\u5408\u6781\u5c11\u91cf\u7684 JS\uff09\u5c06\u5176\u590d\u523b\u5230\u7f51\u9875\u4e2d\u3002<\/p>\n

\u6838\u5fc3\u8bbe\u8ba1\u601d\u8def<\/h2>\n

\u8981\u5b9e\u73b0 macOS \u98ce\u683c\u7684\u5f39\u7a97\uff0c\u6211\u4eec\u9700\u8981\u6293\u4f4f\u4e24\u4e2a\u8bbe\u8ba1\u7075\u9b42\uff1a<\/p>\n

    \n
  1. \u6bdb\u73bb\u7483\u8d28\u611f (Glassmorphism)<\/strong>\uff1a\u5229\u7528 backdrop-filter<\/code> \u865a\u5316\u80cc\u666f\uff0c\u8ba9\u89c6\u89c9\u805a\u7126\u5728\u5f39\u7a97\u4e3b\u4f53\u4e0a\uff0c\u540c\u65f6\u4fdd\u7559\u73af\u5883\u7684\u901a\u900f\u611f\u3002<\/li>\n
  2. \u5f39\u6027\u7269\u7406\u52a8\u753b (Spring Physics)<\/strong>\uff1a\u5229\u7528 CSS \u7684 cubic-bezier<\/code>\uff08\u8d1d\u585e\u5c14\u66f2\u7ebf\uff09\u6a21\u62df\u7269\u4f53\u56e0\u60ef\u6027\u201c\u51b2\u8fc7\u5934\u201d\u518d\u56de\u5f39\u7684\u7269\u7406\u6548\u679c\u3002<\/li>\n<\/ol>\n
    \n

    1. \u9aa8\u67b6\u642d\u5efa (HTML)<\/h2>\n

    \u7ed3\u6784\u4e0a\uff0c\u6211\u4eec\u9700\u8981\u91c7\u7528\u7ecf\u5178\u7684 Overlay (\u906e\u7f69\u5c42)<\/strong> + Modal (\u5185\u5bb9\u5c42)<\/strong> \u7ed3\u6784\u3002<\/p>\n

    HTML<\/p>\n

    <div id="overlay" class="overlay" onclick="toggleModal(false)">\n\n    <div class="modal" onclick="event.stopPropagation()">\n\n        <div class="modal-header">\n\n<h3>\u7cfb\u7edf\u63d0\u793a<\/h3>\n        <\/div>\n\n        <div class="modal-body">\n\n<p>Ciallo\uff5e(∠\u30fbω< )\u2312\u2605<br>\u8fd9\u662f\u4e00\u4e2a\u6a21\u62df macOS \u7269\u7406\u52a8\u6548\u7684\u5f39\u7a97\u3002<\/p>\n        <\/div>\n\n        <div class="modal-footer">\n            <button class="btn-primary" onclick="toggleModal(false)">\u786e\u8ba4<\/button>\n        <\/div>\n\n    <\/div>\n<\/div><\/code><\/pre>\n
    2. \u6ce8\u5165\u7075\u9b42\uff1aCSS \u5b9e\u73b0<\/h2>\n
    A. \u6bdb\u73bb\u7483\u906e\u7f69\u5c42<\/h3>\n
    \u8fd9\u662f\u8425\u9020\u201c\u9ad8\u7ea7\u611f\u201d\u7684\u7b2c\u4e00\u6b65\u3002backdrop-filter: blur()<\/code> \u662f\u5173\u952e\u5c5e\u6027\uff0c\u5b83\u80fd\u6a21\u7cca\u5143\u7d20\u80cc\u540e<\/strong>\u7684\u533a\u57df\uff0c\u800c\u4e0d\u662f\u5143\u7d20\u672c\u8eab\u3002<\/p>\n
    CSS<\/p>\n
    .overlay {\n    position: fixed;\n    top: 0; left: 0;\n    width: 100%; height: 100%;\n    z-index: 999;\n\n    \/* \u5f39\u6027\u5e03\u5c40\u8ba9\u5f39\u7a97\u5c45\u4e2d *\/\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    \/* \u521d\u59cb\u72b6\u6001\uff1a\u5b8c\u5168\u900f\u660e\u4e14\u9690\u85cf *\/\n    background: rgba(0, 0, 0, 0.2); \/* \u6de1\u6de1\u7684\u9ed1\u8272\u906e\u7f69 *\/\n    backdrop-filter: blur(0px);      \/* \u521d\u59cb\u65e0\u6a21\u7cca *\/\n    opacity: 0;\n    visibility: hidden;\n\n    \/* \u5e73\u6ed1\u8fc7\u6e21 *\/\n    transition: all 0.3s ease;\n}\n\n\/* \u6fc0\u6d3b\u72b6\u6001\uff1a\u5f53\u52a0\u4e0a .active \u7c7b\u540d\u65f6 *\/\n.overlay.active {\n    opacity: 1;\n    visibility: visible;\n    backdrop-filter: blur(12px); \/* \ud83c\udf1f \u5173\u952e\uff1a\u6bdb\u73bb\u7483\u751f\u6548 *\/\n}<\/code><\/pre>\n
    B. \u5f39\u7a97\u672c\u4f53\u4e0e\u9634\u5f71<\/h3>\n
    macOS \u7684\u7a97\u53e3\u9634\u5f71\u901a\u5e38\u975e\u5e38\u67d4\u548c\u4e14\u6269\u6563\u8303\u56f4\u5927\u3002<\/p>\n
    CSS<\/p>\n
    .modal {\n    width: 320px;\n    background: rgba(255, 255, 255, 0.9); \/* \u8f7b\u5fae\u900f\u767d\u7684\u80cc\u666f *\/\n    border-radius: 16px;\n    padding: 24px;\n\n    \/* \u7ecf\u5178\u7684\u6df1\u9083\u67d4\u548c\u9634\u5f71 *\/\n    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n\n    \/* \u521d\u59cb\u52a8\u753b\u72b6\u6001\uff1a\u7f29\u5c0f\u81f3 0.8 \u500d *\/\n    transform: scale(0.8);\n    opacity: 0;\n}<\/code><\/pre>\n
    C. \u9b54\u6cd5\u65f6\u523b\uff1aQ\u5f39\u52a8\u753b (Cubic Bezier)<\/h3>\n
    \u8fd9\u662f\u672c\u6587\u7684\u91cd\u70b9\u3002\u666e\u901a\u7684 ease-in-out<\/code> \u53ea\u80fd\u505a\u5230\u5e73\u6ed1\u79fb\u52a8\uff0c\u65e0\u6cd5\u505a\u5230\u201c\u56de\u5f39\u201d\u3002<\/p>\n
    \u6211\u4eec\u9700\u8981\u81ea\u5b9a\u4e49\u4e00\u6761\u8d1d\u585e\u5c14\u66f2\u7ebf\u3002<\/p>\n
      \n
    • \u539f\u7406<\/strong>\uff1a\u5982\u679c\u4e0d\u628a\u66f2\u7ebf\u62c9\u5f97\u8d85\u8fc7 1 (100%)\uff0c\u52a8\u753b\u5c31\u4f1a\u505c\u5728\u7ec8\u70b9\u3002\u5982\u679c\u6211\u4eec\u628a\u66f2\u7ebf\u62c9\u5230 1.5\uff0c\u52a8\u753b\u5c31\u4f1a\u5148\u653e\u5927\u5230 1.5 \u500d\uff0c\u518d\u7f29\u56de 1 \u500d\u3002<\/li>\n
    • \u53c2\u6570\u63a8\u8350<\/strong>\uff1acubic-bezier(0.34, 1.56, 0.64, 1)<\/code><\/li>\n<\/ul>\n
      CSS<\/p>\n
      .modal {\n    \/* ...\u5176\u4ed6\u5c5e\u6027... *\/\n\n    \/* transform \u4f7f\u7528\u81ea\u5b9a\u4e49\u66f2\u7ebf\uff1a\u6a21\u62df\u5f39\u6027\n       opacity \u4f7f\u7528\u666e\u901a\u7f13\u52a8\uff1a\u4fdd\u6301\u81ea\u7136\n    *\/\n    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), \n                opacity 0.3s ease;\n}\n\n\/* \u6fc0\u6d3b\u72b6\u6001\uff1a\u6062\u590d\u6b63\u5e38\u5927\u5c0f *\/\n.overlay.active .modal {\n    transform: scale(1);\n    opacity: 1;\n}<\/code><\/pre>\n
      \n
      3. \u6781\u7b80 JS \u9a71\u52a8<\/h2>\n
      \u6211\u4eec\u53ea\u9700\u8981\u4e00\u4e2a\u7b80\u5355\u7684\u51fd\u6570\u6765\u5207\u6362 active<\/code> \u7c7b\u540d\u3002<\/p>\n
      JavaScript<\/p>\n
      const overlay = document.getElementById('overlay');\n\nfunction toggleModal(isOpen) {\n    if (isOpen) {\n        overlay.classList.add('active');\n    } else {\n        overlay.classList.remove('active');\n    }\n}<\/code><\/pre>\n
      \n
      \u5b8c\u6574\u4ee3\u7801\u6f14\u793a<\/h2>\n
      \u4e3a\u4e86\u65b9\u4fbf\u5927\u5bb6\u76f4\u63a5\u4f53\u9a8c\uff0c\u6211\u5c06\u6240\u6709\u4ee3\u7801\u6574\u5408\u6210\u4e86\u4e00\u4e2a\u6587\u4ef6\u3002\u4f60\u53ef\u4ee5\u5c06\u4ee5\u4e0b\u4ee3\u7801\u4fdd\u5b58\u4e3a .html<\/code> \u6587\u4ef6\u76f4\u63a5\u6253\u5f00\u67e5\u770b\u6548\u679c\u3002<\/p>\n
      HTML<\/p>\n
      <!DOCTYPE html>\n<html lang="zh-CN">\n<head>\n<meta charset="UTF-8">\n<meta name="viewport" content="width=device-width, initial-scale=1.0">\n<title>macOS Spring Modal Demo<\/title>\n<style>\n    \/* \u57fa\u7840\u73af\u5883\uff1a\u4e3a\u4e86\u66f4\u597d\u770b\uff0c\u6211\u4eec\u52a0\u4e00\u5f20\u98ce\u666f\u58c1\u7eb8 *\/\n    body {\n        margin: 0;\n        height: 100vh;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;\n        background: url('https:\/\/images.unsplash.com\/photo-1490730141103-6cac27aaab94?auto=format&fit=crop&w=2000') center\/cover no-repeat;\n    }\n\n    \/* \u89e6\u53d1\u6309\u94ae\u6837\u5f0f *\/\n    .trigger-btn {\n        padding: 12px 30px;\n        font-size: 16px;\n        background: white;\n        border: none;\n        border-radius: 30px;\n        box-shadow: 0 10px 20px rgba(0,0,0,0.15);\n        cursor: pointer;\n        transition: transform 0.1s;\n    }\n    .trigger-btn:active { transform: scale(0.96); }\n\n    \/* ================= \u6838\u5fc3 CSS ================= *\/\n    .overlay {\n        position: fixed;\n        top: 0; left: 0;\n        width: 100%; height: 100%;\n        background: rgba(0, 0, 0, 0.15);\n        backdrop-filter: blur(0px); \n        opacity: 0;\n        visibility: hidden;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        transition: all 0.3s ease;\n    }\n\n    .modal {\n        background: rgba(255, 255, 255, 0.85);\n        width: 300px;\n        padding: 30px;\n        border-radius: 18px;\n        text-align: center;\n        box-shadow: 0 25px 60px rgba(0,0,0,0.22);\n\n        \/* \u52a8\u753b\u521d\u59cb\u72b6\u6001 *\/\n        transform: scale(0.8);\n        opacity: 0;\n\n        \/* \ud83c\udf1f \u6838\u5fc3\uff1a\u56de\u5f39\u66f2\u7ebf *\/\n        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), \n                    opacity 0.3s ease;\n    }\n\n    \/* \u6fc0\u6d3b\u72b6\u6001 *\/\n    .overlay.active {\n        opacity: 1;\n        visibility: visible;\n        backdrop-filter: blur(10px);\n    }\n    .overlay.active .modal {\n        transform: scale(1);\n        opacity: 1;\n    }\n\n    \/* \u6587\u5b57\u6837\u5f0f *\/\n    h2 { margin: 0 0 10px 0; color: #333; }\n    p { color: #666; font-size: 14px; line-height: 1.6; margin-bottom: 25px; }\n    .close-btn {\n        background: #007aff;\n        color: white;\n        border: none;\n        padding: 8px 24px;\n        border-radius: 6px;\n        font-size: 14px;\n        cursor: pointer;\n    }\n<\/style>\n<\/head>\n<body>\n\n    <button class="trigger-btn" onclick="toggleModal(true)">\u2728 \u6253\u5f00\u5f39\u7a97<\/button>\n\n    <div id="overlay" class="overlay" onclick="toggleModal(false)">\n        <div class="modal" onclick="event.stopPropagation()">\n\n<h2>Done!<\/h2>\n\n<p>\u611f\u53d7\u5230\u4e86\u5417\uff1f<br>\u8fd9\u79cd\u5fae\u5fae\u56de\u5f39\u7684\u7ec6\u817b\u8d28\u611f\u3002<\/p>\n            <button class="close-btn" onclick="toggleModal(false)">\u5173\u95ed<\/button>\n        <\/div>\n    <\/div>\n\n<script>\n        const overlay = document.getElementById('overlay');\n        function toggleModal(isOpen) {\n            isOpen ? overlay.classList.add('active') : overlay.classList.remove('active');\n        }\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
      \u603b\u7ed3<\/h2>\n
      \u6211\u4eec\u4e0d\u9700\u8981\u5e9e\u5927\u7684\u52a8\u753b\u5e93\uff08\u5982 GSAP\uff09\u4e5f\u80fd\u5b9e\u73b0\u7ec6\u817b\u7684 UI \u4ea4\u4e92\u3002\u53ea\u8981\u7528\u597d CSS \u7684 transition<\/code> \u548c cubic-bezier<\/code>\uff0c\u914d\u5408 backdrop-filter<\/code>\uff0c\u5c31\u80fd\u8ba9\u7f51\u9875\u8131\u79bb\u201c\u5de5\u4e1a\u8f6f\u4ef6\u201d\u7684\u751f\u786c\u611f\uff0c\u62e5\u62b1\u201c\u539f\u751f\u5e94\u7528\u201d\u7684\u6d41\u7545\u4f53\u9a8c\u3002<\/p>\n
      \u5feb\u53bb\u8bd5\u8bd5\u628a\u8fd9\u4e2a\u6548\u679c\u52a0\u5230\u4f60\u7684\u4e2a\u4eba\u9879\u76ee\u4e2d\u5427\uff01<\/p>","protected":false},"excerpt":{"rendered":"
      \u5728 Web \u5f00\u53d1\u4e2d\uff0c\u6211\u4eec\u5e38\u5e38\u8ffd\u6c42\u6781\u81f4\u7684 UI \u4f53\u9a8c\u3002\u800c macOS \u7684\u754c\u9762\u4e4b\u6240\u4ee5\u8ba9\u4eba\u611f\u5230\u6109\u60a6\uff0c\u5f88\u5927\u7a0b\u5ea6\u4e0a\u5f52\u529f\u4e8e\u5b83\u90a3\u7b26\u5408\u7269\u7406\u76f4\u89c9\u7684\u5fae …<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"emotion":"","emotion_color":"","title_style":"","license":"","footnotes":""},"categories":[23],"tags":[],"class_list":["post-226","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/caoxunyi.cn\/index.php\/wp-json\/wp\/v2\/posts\/226","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/caoxunyi.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/caoxunyi.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/caoxunyi.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/caoxunyi.cn\/index.php\/wp-json\/wp\/v2\/comments?post=226"}],"version-history":[{"count":1,"href":"https:\/\/caoxunyi.cn\/index.php\/wp-json\/wp\/v2\/posts\/226\/revisions"}],"predecessor-version":[{"id":227,"href":"https:\/\/caoxunyi.cn\/index.php\/wp-json\/wp\/v2\/posts\/226\/revisions\/227"}],"wp:attachment":[{"href":"https:\/\/caoxunyi.cn\/index.php\/wp-json\/wp\/v2\/media?parent=226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/caoxunyi.cn\/index.php\/wp-json\/wp\/v2\/categories?post=226"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/caoxunyi.cn\/index.php\/wp-json\/wp\/v2\/tags?post=226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}