{"html":"\n","css":".menu-tooltip {\n --toggle-color: #fff;\n --item-1-gradient: linear-gradient(45deg, #62daca, #10d4a9);\n --item-2-gradient: linear-gradient(45deg, #f97d98, #d41f46);\n --item-3-gradient: linear-gradient(45deg, aliceblue, #d169d1);\n width: 200px;\n height: 200px;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 16px;\n -webkit-tap-highlight-color: transparent;\n user-select: none;\n\n .toggle {\n width: 60px;\n height: 60px;\n background-color: var(--toggle-color);\n text-align: center;\n line-height: 60px;\n border-radius: 50%;\n font-size: 1.8em;\n z-index: 999;\n position: absolute;\n transition: transform 1.2s ease-in-out;\n cursor: pointer;\n box-shadow:\n inset -2px -2px 4px 0 #0006,\n inset 2px 2px 4px 0 #0008;\n\n &:before {\n content: \"\";\n position: absolute;\n inset: 0px;\n background-color: var(--toggle-color);\n z-index: -1;\n filter: blur(30px) saturate(900%) opacity(0.5);\n }\n }\n\n #toggle {\n appearance: none;\n visibility: hidden;\n &:checked + .toggle {\n transform: rotate(315deg);\n }\n\n &:checked ~ .circle-box {\n transform: rotate(calc(360deg / 8 * var(--i)));\n }\n }\n\n .circle-box {\n position: absolute;\n left: 0;\n list-style-type: none;\n transition: 0.5s;\n transform-origin: 100px;\n transition-delay: calc(0.1s * var(--i));\n transform: rotate(0deg) translateX(70px);\n\n &:nth-of-type(1) .anchor {\n background: var(--item-1-gradient);\n }\n\n &:nth-of-type(2) .anchor {\n background: var(--item-2-gradient);\n }\n\n &:nth-of-type(3) .anchor {\n background: var(--item-3-gradient);\n }\n\n &:nth-of-type(4),\n &:nth-of-type(5),\n &:nth-of-type(6),\n &:nth-of-type(7) {\n visibility: hidden;\n }\n\n .anchor {\n width: 50px;\n height: 50px;\n display: flex;\n justify-content: center;\n line-height: 50px;\n border-radius: 50%;\n font-size: 1.5em;\n text-decoration: none;\n transform: rotate(calc(360deg / -8 * var(--i)));\n\n &:hover {\n &::before {\n inset: -7px;\n }\n }\n\n &:before {\n content: \"\";\n position: absolute;\n inset: 0px;\n background-image: inherit;\n border-radius: inherit;\n z-index: -1;\n filter: blur(30px) saturate(900%);\n transition: inset 0.2s ease;\n }\n }\n }\n}\n"}

grumpy-squid-37

👁 实时预览

📝 源代码