{"html":"

\n \n\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n \n

\n","css":".radial-menu-container {\n --primary-bg: #ffffff;\n --secondary-bg: #f3f4f6;\n --accent-color: #3b82f6;\n --text-color: #1f2937;\n --line-color: #d1d5db;\n --shadow-sm: 0 0.125em 0.25em rgba(0, 0, 0, 0.05);\n --shadow-md: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);\n --shadow-lg: 0 0.5em 1em rgba(0, 0, 0, 0.15);\n\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);\n font-size: 16px;\n}\n\n.menu-toggle {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n}\n\n.center-icon {\n position: relative;\n width: 4em;\n height: 4em;\n background: var(--primary-bg);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 100;\n box-shadow: var(--shadow-md);\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.center-icon:hover {\n transform: scale(1.1);\n box-shadow: var(--shadow-lg);\n background: var(--line-color);\n}\n\n.center-icon:hover svg path,\n.center-icon:hover svg circle {\n stroke: white;\n}\n\n.center-icon:active {\n transform: scale(0.95);\n}\n\n.center-icon:focus-visible {\n outline: 0.125em solid var(--accent-color);\n outline-offset: 0.25em;\n}\n\n.center-icon svg {\n width: 2.5em;\n height: 2.5em;\n transition: transform 0.3s ease;\n}\n\n.menu-toggle:checked ~ .center-icon svg {\n transform: rotate(180deg);\n}\n\n.connection-lines {\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 1;\n}\n\n.line {\n fill: none;\n stroke: url(#googleFlow);\n stroke-width: 2.5;\n stroke-linecap: round;\n opacity: 0;\n stroke-dasharray: 350;\n stroke-dashoffset: 350;\n\n transition: stroke-dashoffset 0.7s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.menu-toggle:checked ~ .connection-lines .line {\n opacity: 1;\n}\n\n.menu-toggle:checked ~ .connection-lines .line-1 {\n stroke-dashoffset: 0;\n transition-delay: 0.1s;\n}\n\n.menu-toggle:checked ~ .connection-lines .line-2 {\n stroke-dashoffset: 0;\n transition-delay: 0.15s;\n}\n\n.menu-toggle:checked ~ .connection-lines .line-3 {\n stroke-dashoffset: 0;\n transition-delay: 0.2s;\n}\n\n.menu-toggle:checked ~ .connection-lines .line-4 {\n stroke-dashoffset: 0;\n transition-delay: 0.25s;\n}\n\n.menu-toggle:checked ~ .connection-lines .line-5 {\n stroke-dashoffset: 0;\n transition-delay: 0.3s;\n}\n\n.menu-toggle:checked ~ .connection-lines .line-6 {\n stroke-dashoffset: 0;\n transition-delay: 0.35s;\n}\n\n.menu-toggle:checked ~ .connection-lines .line-7 {\n stroke-dashoffset: 0;\n transition-delay: 0.4s;\n}\n.menu-toggle:checked ~ .connection-lines .line-8 {\n stroke-dashoffset: 0;\n transition-delay: 0.5s;\n}\n\n.menu-item {\n position: absolute;\n opacity: 0;\n transform: scale(0) translate(-50%, -50%);\n transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n z-index: 10;\n}\n\n.icon-circle {\n width: 3.5em;\n height: 3.5em;\n background: var(--primary-bg);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: var(--shadow-sm);\n cursor: pointer;\n transition: all 0.3s ease;\n border: 0.125em solid transparent;\n}\n\n.icon-circle:hover {\n transform: scale(1.15);\n box-shadow: var(--shadow-lg);\n border-color: var(--accent-color);\n background: var(--secondary-bg);\n stroke: #1f2937;\n}\n\n.icon-circle:active {\n transform: scale(1.05);\n}\n\n.icon-circle:focus-visible {\n outline: 0.125em solid var(--accent-color);\n outline-offset: 0.125em;\n}\n\n.icon-circle svg {\n width: 2em;\n height: 2em;\n transition: transform 0.3s ease;\n}\n\n.icon-circle:hover svg {\n transform: rotate(12deg);\n}\n\n.menu-toggle:checked ~ .menu-item {\n opacity: 1;\n transform: scale(1) translate(-50%, -50%);\n}\n\n.item-1 {\n left: 20%;\n top: 28%;\n}\n\n.menu-toggle:checked ~ .item-1 {\n transition-delay: 0.1s;\n}\n\n.item-2 {\n left: 45.5%;\n top: 18%;\n}\n\n.menu-toggle:checked ~ .item-2 {\n transition-delay: 0.15s;\n}\n\n.item-3 {\n left: 75%;\n top: 15%;\n}\n\n.menu-toggle:checked ~ .item-3 {\n transition-delay: 0.2s;\n}\n\n.item-4 {\n left: 80%;\n top: 34.5%;\n}\n\n.menu-toggle:checked ~ .item-4 {\n transition-delay: 0.25s;\n}\n\n.item-5 {\n left: 82%;\n top: 53%;\n}\n\n.menu-toggle:checked ~ .item-5 {\n transition-delay: 0.3s;\n}\n\n.item-6 {\n left: 82.5%;\n top: 72%;\n}\n\n.menu-toggle:checked ~ .item-6 {\n transition-delay: 0.35s;\n}\n\n.item-7 {\n left: 50%;\n top: 85%;\n}\n\n.menu-toggle:checked ~ .item-7 {\n transition-delay: 0.4s;\n}\n\n.item-8 {\n left: 27%;\n top: 74%;\n}\n\n.menu-toggle:checked ~ .item-8 {\n transition-delay: 0.5s;\n}\n\n@media (max-width: 768px) {\n .radial-menu-container {\n font-size: 14px;\n }\n}\n\n@media (max-width: 480px) {\n .radial-menu-container {\n font-size: 12px;\n }\n}\n\n.icon-circle {\n position: relative;\n}\n\n.icon-circle::after {\n content: attr(data-tooltip);\n position: absolute;\n bottom: 120%;\n left: 50%;\n transform: translateX(-50%) translateY(6px);\n\n background: linear-gradient(\n 135deg,\n #4285f4 0%,\n #ea4335 30%,\n #fbbc05 60%,\n #34a853 100%\n );\n color: #ffffff;\n padding: 0.35em 0.6em;\n font-size: 0.75em;\n white-space: nowrap;\n border-radius: 0.375em;\n\n opacity: 0;\n pointer-events: none;\n transition:\n opacity 0.25s ease,\n transform 0.25s ease;\n z-index: 999;\n box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);\n}\n\n.icon-circle:hover::after,\n.icon-circle:hover::before,\n.icon-circle:focus-visible::after,\n.icon-circle:focus-visible::before {\n opacity: 1;\n transform: translateX(-50%) translateY(0);\n}\n"}

perfect-cheetah-55

👁 实时预览

📝 源代码