{"html":"

\n \n \n \n Lavender Dream\n \n\n \n \n \n Coral Sunset\n \n\n \n \n \n Mint Breeze\n \n\n \n \n \n Sky Whisper\n \n

\n","css":".lgc-radio-wrapper {\n margin: 0;\n padding: 2rem;\n font-family:\n system-ui,\n -apple-system,\n sans-serif;\n background: #f8f9fa;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n align-items: center;\n justify-content: center;\n min-height: 100%;\n}\n\n.radio-group {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.liquid-radio {\n --primary-hue: 280;\n --secondary-hue: 320;\n --tertiary-hue: 200;\n --saturation: 45%;\n --lightness: 85%;\n --border-radius: 2em;\n --transition-duration: 0.4s;\n --scale-factor: 1;\n\n position: relative;\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n font-size: 1rem;\n user-select: none;\n transition: all var(--transition-duration)\n cubic-bezier(0.25, 0.46, 0.45, 0.94);\n transform-style: preserve-3d;\n perspective: 1000px;\n}\n\n.liquid-radio:hover {\n --scale-factor: 1.03;\n transform: scale(var(--scale-factor)) translateZ(5px);\n}\n\n.liquid-radio input[type=\"radio\"] {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.liquid-radio .radio-visual {\n position: relative;\n width: 1.5em;\n height: 1.5em;\n margin-right: 0.75em;\n border-radius: var(--border-radius);\n background: linear-gradient(\n 135deg,\n hsl(var(--primary-hue), var(--saturation), var(--lightness)),\n hsl(var(--secondary-hue), var(--saturation), var(--lightness)),\n hsl(var(--tertiary-hue), var(--saturation), var(--lightness))\n );\n border: 0.125em solid\n hsla(\n var(--primary-hue),\n var(--saturation),\n calc(var(--lightness) - 20%),\n 0.4\n );\n transition: all var(--transition-duration)\n cubic-bezier(0.25, 0.46, 0.45, 0.94);\n box-shadow:\n 0 0.25em 0.5em\n hsla(\n var(--primary-hue),\n var(--saturation),\n calc(var(--lightness) - 40%),\n 0.15\n ),\n 0 0.125em 0.25em\n hsla(\n var(--primary-hue),\n var(--saturation),\n calc(var(--lightness) - 30%),\n 0.2\n ),\n 0 0.0625em 0.125em hsla(0, 0%, 0%, 0.1),\n inset 0 0.125em 0.25em hsla(0, 0%, 100%, 0.6),\n inset 0 -0.0625em 0.125em hsla(var(--primary-hue), var(--saturation), calc(var(\n --lightness\n ) - 15%), 0.3);\n transform-style: preserve-3d;\n}\n\n.liquid-radio .radio-visual::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0.5em;\n height: 0.5em;\n border-radius: 50%;\n background: radial-gradient(\n circle at 30% 30%,\n hsl(\n var(--primary-hue),\n calc(var(--saturation) + 25%),\n calc(var(--lightness) - 25%)\n ),\n hsl(\n var(--secondary-hue),\n calc(var(--saturation) + 20%),\n calc(var(--lightness) - 35%)\n ),\n hsl(\n var(--primary-hue),\n calc(var(--saturation) + 15%),\n calc(var(--lightness) - 45%)\n )\n );\n transform: translate(-50%, -50%) scale(0) translateZ(2px);\n transition: all var(--transition-duration)\n cubic-bezier(0.68, -0.25, 0.265, 1.25);\n opacity: 0;\n box-shadow:\n 0 0.0625em 0.125em\n hsla(\n var(--primary-hue),\n var(--saturation),\n calc(var(--lightness) - 50%),\n 0.4\n ),\n inset 0 0.0312em 0.0625em hsla(0, 0%, 100%, 0.4);\n}\n\n.liquid-radio .radio-visual::after {\n content: \"\";\n position: absolute;\n top: -0.1875em;\n left: -0.1875em;\n right: -0.1875em;\n bottom: -0.1875em;\n border-radius: calc(var(--border-radius) + 0.0625em);\n background: radial-gradient(\n ellipse at top left,\n hsla(var(--primary-hue), var(--saturation), var(--lightness), 0.6),\n hsla(var(--secondary-hue), var(--saturation), var(--lightness), 0.4),\n hsla(var(--tertiary-hue), var(--saturation), var(--lightness), 0.2)\n );\n opacity: 0;\n transition: all var(--transition-duration)\n cubic-bezier(0.25, 0.46, 0.45, 0.94);\n z-index: -1;\n filter: blur(0.125em);\n}\n\n.liquid-radio:hover .radio-visual {\n --saturation: 55%;\n --lightness: 88%;\n transform: translateY(-0.125em) rotateX(5deg) translateZ(3px);\n box-shadow:\n 0 0.5em 1em\n hsla(\n var(--primary-hue),\n var(--saturation),\n calc(var(--lightness) - 40%),\n 0.2\n ),\n 0 0.25em 0.5em\n hsla(\n var(--primary-hue),\n var(--saturation),\n calc(var(--lightness) - 30%),\n 0.25\n ),\n 0 0.125em 0.25em hsla(0, 0%, 0%, 0.15),\n inset 0 0.1875em 0.375em hsla(0, 0%, 100%, 0.7),\n inset 0 -0.0625em 0.125em hsla(var(--primary-hue), var(--saturation), calc(var(\n --lightness\n ) - 15%), 0.4);\n}\n\n.liquid-radio:hover .radio-visual::after {\n opacity: 1;\n transform: translateZ(-1px) scale(1.1);\n}\n\n.liquid-radio input[type=\"radio\"]:focus + .radio-visual {\n outline: 0.125em solid\n hsl(var(--primary-hue), var(--saturation), calc(var(--lightness) - 40%));\n outline-offset: 0.125em;\n}\n\n.liquid-radio input[type=\"radio\"]:checked + .radio-visual {\n --saturation: 65%;\n --lightness: 80%;\n background: radial-gradient(\n ellipse at top left,\n hsl(var(--primary-hue), var(--saturation), calc(var(--lightness) + 5%)),\n hsl(var(--secondary-hue), var(--saturation), var(--lightness)),\n hsl(var(--tertiary-hue), var(--saturation), calc(var(--lightness) - 5%))\n );\n border-color: hsl(\n var(--primary-hue),\n calc(var(--saturation) + 10%),\n calc(var(--lightness) - 30%)\n );\n box-shadow:\n 0 0.375em 0.75em\n hsla(\n var(--primary-hue),\n var(--saturation),\n calc(var(--lightness) - 40%),\n 0.25\n ),\n 0 0.1875em 0.375em\n hsla(\n var(--primary-hue),\n var(--saturation),\n calc(var(--lightness) - 30%),\n 0.3\n ),\n 0 0.0625em 0.125em hsla(0, 0%, 0%, 0.2),\n inset 0 0.1875em 0.375em hsla(0, 0%, 100%, 0.8),\n inset 0 -0.0625em 0.1875em hsla(var(--primary-hue), var(--saturation), calc(var(\n --lightness\n ) - 20%), 0.4);\n transform: translateZ(2px);\n}\n\n.liquid-radio input[type=\"radio\"]:checked + .radio-visual::before {\n transform: translate(-50%, -50%) scale(1) translateZ(2px);\n opacity: 1;\n animation: pulseGlow 2s ease-in-out infinite;\n}\n\n.liquid-radio input[type=\"radio\"]:active + .radio-visual {\n transform: scale(0.96) translateY(0.0625em) rotateX(-2deg);\n transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n@keyframes pulseGlow {\n 0%,\n 100% {\n box-shadow:\n 0 0.0625em 0.125em\n hsla(\n var(--primary-hue),\n var(--saturation),\n calc(var(--lightness) - 50%),\n 0.4\n ),\n inset 0 0.0312em 0.0625em hsla(0, 0%, 100%, 0.4);\n }\n 50% {\n box-shadow:\n 0 0.0625em 0.1875em\n hsla(\n var(--primary-hue),\n var(--saturation),\n calc(var(--lightness) - 50%),\n 0.6\n ),\n 0 0 0.25em\n hsla(\n var(--primary-hue),\n calc(var(--saturation) + 20%),\n calc(var(--lightness) - 30%),\n 0.3\n ),\n inset 0 0.0312em 0.0625em hsla(0, 0%, 100%, 0.6);\n }\n}\n\n.liquid-radio .radio-label {\n color: hsl(var(--primary-hue), 25%, 45%);\n font-weight: 500;\n transition: color var(--transition-duration) ease;\n}\n\n.liquid-radio:hover .radio-label {\n color: hsl(var(--primary-hue), 35%, 35%);\n}\n\n.liquid-radio input[type=\"radio\"]:checked ~ .radio-label {\n color: hsl(var(--primary-hue), 40%, 30%);\n}\n\n/* Variant colors */\n.liquid-radio.variant-coral {\n --primary-hue: 15;\n --secondary-hue: 45;\n --tertiary-hue: 340;\n}\n\n.liquid-radio.variant-mint {\n --primary-hue: 150;\n --secondary-hue: 180;\n --tertiary-hue: 120;\n}\n\n.liquid-radio.variant-sky {\n --primary-hue: 200;\n --secondary-hue: 220;\n --tertiary-hue: 260;\n}\n"}

curly-fish-69

👁 实时预览

📝 源代码