{"html":"\n","css":".menu {\n /* position: fixed;\n left: 50%;\n bottom: 12px;\n bottom: calc(12px + env(safe-area-inset-bottom)); */\n /* transform: translateX(-50%); */\n width: calc(100% - 20px);\n max-width: 520px;\n backdrop-filter: blur(12px) saturate(180%) contrast(200%);\n -webkit-backdrop-filter: blur(12px) saturate(180%) contrast(200%);\n background: rgba(0, 122, 255, 0.404);\n border: 1px solid var(--glass-border);\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);\n padding: 8px;\n border-radius: 99rem;\n display: flex;\n justify-content: center;\n gap: 8px;\n z-index: 50;\n}\n\n.menu::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n box-shadow:\n inset 2px 2px 5px -2px rgba(255, 255, 255, 0.4),\n inset -2px -2px 5px 2px rgba(255, 255, 255, 0.4),\n inset 0 -2px 0 rgba(255, 255, 255, 0.2);\n pointer-events: none;\n z-index: -1;\n}\n\n.menu a {\n display: flex;\n flex-direction: column;\n align-items: center;\n flex: 1 1 0;\n min-width: 0;\n color: rgba(255, 255, 255, 90%);\n text-decoration: none;\n padding: 10px 6px;\n border-radius: 999rem;\n -webkit-tap-highlight-color: transparent;\n transition:\n background 0.18s var(--ease-spring),\n color 0.18s var(--ease-spring),\n transform 0.18s var(--ease-spring),\n box-shadow 0.3s ease-in-out;\n}\n\n.menu a:hover {\n transition:\n background 0.18s var(--ease-spring),\n color 0.18s var(--ease-spring),\n transform 0.18s var(--ease-spring),\n box-shadow 0.3s ease-in-out;\n background-color: rgba(255, 255, 255, 30%);\n box-shadow:\n inset 2px 2px 5px -2px rgba(255, 255, 255, 0.4),\n inset -2px -1px 5px 0 rgba(255, 255, 255, 0.4),\n inset 0 -2px 0 rgba(255, 255, 255, 0.2);\n transform: rotate(2.2);\n color: rgba(0, 122, 255, 70%);\n}\n\n.menu a svg {\n width: 1.4rem;\n font-size: 1.4rem;\n}\n\n.menu a span {\n font-size: 0.8rem;\n font-weight: 600;\n line-height: 1;\n margin-top: 4px;\n}\n\n.menu a.active {\n background: rgb(237, 237, 237, 60%);\n color: rgba(0, 122, 255, 90%);\n}\n\n.menu a:active {\n transform: scale(0.98);\n}\n"}

yellow-rattlesnake-26

👁 实时预览

📝 源代码