{"html":"

\n \n \n \n \n \n \n Purple\n \n \n \n \n \n \n \n Light Yellow\n \n \n \n \n \n \n \n Light Green\n \n

\n","css":".magic-checkbox-group {\n display: grid;\n gap: 24px;\n padding: 25px;\n background: radial-gradient(circle, #1a1a2e 0%, #16213e 100%);\n border-radius: 16px;\n width: fit-content;\n}\n\n.magic-check {\n display: flex;\n align-items: center;\n gap: 15px;\n cursor: pointer;\n position: relative;\n padding-left: 55px;\n}\n\n.magic-check input {\n position: absolute;\n opacity: 0;\n}\n\n.liquid-box {\n position: absolute;\n left: 0;\n width: 40px;\n height: 40px;\n border-radius: 12px;\n background: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(5px);\n border: 1px solid rgba(255, 255, 255, 0.2);\n overflow: hidden;\n transition: all 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6);\n}\n\n.liquid-fill {\n position: absolute;\n bottom: -100%;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(45deg, #00dbde, #fc00ff);\n clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);\n transition: all 0.8s cubic-bezier(0.68, -0.6, 0.32, 1.6);\n}\n\n.sparkle {\n position: absolute;\n width: 100%;\n height: 100%;\n background: radial-gradient(\n circle at center,\n rgba(255, 255, 255, 0.8) 0%,\n transparent 70%\n );\n opacity: 0;\n transform: scale(0);\n transition: all 0.4s;\n}\n\n.magic-label {\n color: white;\n font-family: \"Segoe UI\", sans-serif;\n font-size: 18px;\n font-weight: 600;\n text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);\n transition: all 0.4s;\n letter-spacing: 0.5px;\n}\n\n.magic-check:nth-child(2) .liquid-fill {\n background: linear-gradient(45deg, #f6d365, #fda085);\n}\n\n.magic-check:nth-child(3) .liquid-fill {\n background: linear-gradient(45deg, #84fab0, #8fd3f4);\n}\n\n.magic-check input:checked ~ .liquid-box {\n transform: rotate(8deg);\n box-shadow: 0 0 20px rgba(0, 219, 222, 0.5);\n}\n\n.magic-check:nth-child(2) input:checked ~ .liquid-box {\n box-shadow: 0 0 20px rgba(246, 211, 101, 0.5);\n}\n\n.magic-check:nth-child(3) input:checked ~ .liquid-box {\n box-shadow: 0 0 20px rgba(132, 250, 176, 0.5);\n}\n\n.magic-check input:checked ~ .liquid-box .liquid-fill {\n clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);\n bottom: 0;\n}\n\n.magic-check input:checked ~ .liquid-box .sparkle {\n opacity: 1;\n transform: scale(1);\n transition-delay: 0.3s;\n}\n\n.magic-check input:checked ~ .magic-label {\n transform: translateX(5px);\n text-shadow: 0 0 15px currentColor;\n}\n\n.magic-check:hover .liquid-box {\n transform: scale(1.05);\n}\n\n@keyframes sparkle-pulse {\n 0% {\n transform: scale(1);\n opacity: 0.8;\n }\n 50% {\n transform: scale(1.1);\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n opacity: 0.8;\n }\n}\n\n.magic-check input:checked ~ .liquid-box .sparkle {\n animation: sparkle-pulse 1.5s infinite;\n}\n"}

odd-pug-38

👁 实时预览

📝 源代码