{"html":"

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

\n\n

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

\n","css":"/* Radio group styles */\n.radio-group {\n --radio-size-total: 120px; /* Total size */\n --radio-border: 12px; /* Border thickness */\n\n --radio-bg-hue: 220; /* Background hue */\n --radio-border-hue: 210; /* Border hue */\n\n --transition-speed: 0.05s; /* Transition speed for hover effects */\n --glow-speed: 1.25s; /* Speed for glow animation */\n --glow-times: 3; /* Number of times the glow animation runs */\n\n display: flex;\n flex-wrap: wrap;\n gap: 3rem;\n align-items: center;\n justify-content: center;\n}\n\n/* Base */\n.radio-container {\n position: relative;\n width: var(--radio-size-total);\n height: var(--radio-size-total);\n border-radius: 50%;\n background-color: hsl(var(--radio-border-hue), 20%, 20%);\n box-shadow: 0 calc(var(--radio-border) / 3) 4px 0 #0007;\n}\n\n/* Base bevels */\n.radio-container::before {\n content: \"\";\n pointer-events: none;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: hsla(var(--radio-border-hue), 20%, 10%, 1);\n mask: radial-gradient(\n circle at 50% 50%,\n transparent calc(var(--radio-size-total) / 2 - var(--radio-border)),\n black calc(var(--radio-size-total) / 2 - var(--radio-border) + 1px),\n black calc(var(--radio-size-total) / 2 - var(--radio-border) + 3px),\n transparent calc(var(--radio-size-total) / 2 - var(--radio-border) + 5px),\n transparent calc(var(--radio-size-total) / 2 - 5px),\n black calc(var(--radio-size-total) / 2 - 3px)\n );\n z-index: 1;\n}\n\n.radio-button {\n position: absolute;\n top: calc(var(--radio-border) / 1);\n left: calc(var(--radio-border) / 1);\n width: calc(var(--radio-size-total) - var(--radio-border) * 2);\n height: calc(var(--radio-size-total) - var(--radio-border) * 2);\n border-radius: 50%;\n background-color: hsl(var(--radio-bg-hue), 100%, 50%);\n background-image: linear-gradient(\n to bottom,\n hsl(var(--radio-bg-hue), 100%, 60%) 0%,\n hsl(var(--radio-bg-hue), 100%, 50%) 70%,\n hsl(var(--radio-bg-hue), 100%, 30%) 100%\n );\n box-shadow: 0 calc(var(--radio-border) * 2) 6px 6px #0003;\n transition: box-shadow var(--transition-speed) ease-in-out;\n}\n\n/* Gloss effects 1 */\n.radio-button::before {\n content: \"\";\n position: absolute;\n pointer-events: none;\n top: calc(-1 * var(--radio-border));\n left: calc(-1 * var(--radio-border));\n width: var(--radio-size-total);\n height: var(--radio-size-total);\n border-radius: 50%;\n background-image: radial-gradient(\n circle at 50% 50%,\n transparent calc(var(--radio-size-total) / 2 - var(--radio-border)),\n hsla(var(--radio-border-hue), 100%, 0%, 0.5) 75%\n ),\n conic-gradient(\n from 20deg at 50% 50%,\n #fff 0%,\n transparent 1%,\n #fff4 20%,\n #0002 50%,\n #fff8 75%,\n transparent 85%,\n #fffa 86%,\n #fff6 87%,\n transparent 99%,\n #fff 100%\n );\n mask-image: radial-gradient(\n circle at 50% 50%,\n transparent 0,\n transparent 30%,\n black 35%,\n black calc(var(--radio-size-total) / 2),\n transparent calc(var(--radio-size-total) / 2 + 2px)\n );\n}\n\n/* Gloss effects 2 */\n.radio-button::after {\n content: \"\";\n position: absolute;\n pointer-events: none;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n\n background-image:\n /* Small reflection */\n radial-gradient(\n ellipse 6% 4% at 43% 29%,\n #fffe 35%,\n #fff8 55%,\n transparent 100%\n ),\n /* Repeating small reflections */\n radial-gradient(\n ellipse 3% 2% at 75% 20%,\n #fffd 45%,\n #fff8 50%,\n transparent 100%\n ),\n radial-gradient(\n ellipse 2% 1% at 70% 30%,\n #fffc 15%,\n #fff7 50%,\n transparent 100%\n ),\n radial-gradient(\n ellipse 2% 1% at 65% 40%,\n #fffa 15%,\n #fff5 50%,\n transparent 100%\n ),\n radial-gradient(\n ellipse 3% 2% at 25% 22%,\n #fffd 45%,\n #fff8 50%,\n transparent 100%\n ),\n radial-gradient(\n ellipse 2% 1% at 30% 32%,\n #fffc 15%,\n #fff7 50%,\n transparent 100%\n ),\n radial-gradient(\n ellipse 2% 1% at 35% 42%,\n #fffa 15%,\n #fff5 50%,\n transparent 100%\n ),\n /* Large reflection */\n radial-gradient(\n ellipse 70% 50% at 50% 37%,\n transparent 0%,\n #fff2 45%,\n #fff3 51%,\n transparent 57%\n ),\n radial-gradient(\n circle at 50% 50%,\n transparent 40%,\n #fff2 47%,\n #fff1 68%,\n transparent 59%,\n transparent 100%\n );\n\n box-shadow: 0 0 calc(var(--radio-border) / 3) 3px #000c inset;\n z-index: 1;\n transition:\n box-shadow var(--transition-speed) ease-in-out,\n background-image var(--transition-speed) ease-in-out;\n}\n\n/* Radio input (no appearance) */\n.radio-input-element {\n position: absolute;\n top: calc(var(--radio-border) / 1);\n left: calc(var(--radio-border) / 1);\n width: calc(var(--radio-size-total) - var(--radio-border) * 2);\n height: calc(var(--radio-size-total) - var(--radio-border) * 2);\n appearance: none;\n border-radius: 50%;\n background-color: transparent;\n opacity: 0;\n margin: 0;\n cursor: pointer;\n}\n\n/* Radio icon */\n.radio-icon-element {\n position: absolute;\n pointer-events: none;\n\n width: 75%;\n height: 75%;\n top: 12.5%;\n left: 12.5%;\n\n fill: none;\n stroke: rgba(230, 230, 230, 0.9);\n stroke-width: 3px;\n stroke-linecap: square;\n filter: drop-shadow(0 14px 3px rgba(0, 0, 0, 0.4));\n\n /* Simulate spherical shading */\n mask-image: radial-gradient(circle at center, black 40%, transparent 100%);\n mask-composite: exclude;\n -webkit-mask-image: radial-gradient(\n circle at center,\n black 40%,\n transparent 100%\n );\n -webkit-mask-composite: destination-out;\n\n z-index: 0;\n transition:\n transform calc(var(--transition-speed) * 0.25) ease-in-out,\n filter calc(var(--transition-speed) * 0.25) ease-in-out;\n}\n\n.glow {\n pointer-events: none;\n position: absolute;\n top: -15%;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: color-mix(\n in hsl,\n hsl(var(--radio-bg-hue), 100%, 60%),\n rgb(255, 225, 92) 15%\n );\n filter: blur(2em);\n opacity: 0.45;\n transform: perspective(100px) rotateX(10deg) scale(0.8);\n z-index: 1;\n opacity: 0;\n}\n\n/* Checked state styles */\n.radio-container:has(.radio-input-element:checked) {\n .radio-button {\n box-shadow: 0 calc(var(--radio-border) * 2) 12px 2px #0004;\n }\n\n .radio-button::after {\n box-shadow: 0 0 var(--radio-border) calc(var(--radio-border) / 2) #000c\n inset;\n }\n .glow {\n animation: pulse var(--glow-speed) ease-in-out var(--glow-times) forwards;\n }\n\n .radio-icon-element {\n filter: drop-shadow(0 12px 2px rgba(0, 0, 0, 0.5));\n }\n}\n\n.radio-container:has(.radio-input-element:checked):hover {\n .radio-icon-element {\n filter: drop-shadow(0 16px 4px rgba(0, 0, 0, 0.4));\n }\n}\n\n.radio-container:has(.radio-input-element:checked):active {\n .radio-icon-element {\n filter: drop-shadow(0 10px 2px rgba(0, 0, 0, 0.4));\n }\n}\n\n/* Hover effect */\n.radio-container:hover {\n .radio-button {\n box-shadow: 0 calc(var(--radio-border) * 2.5) 12px 2px #0003;\n }\n\n .radio-button::after {\n box-shadow: 0 0 calc(var(--radio-border) / 3) 3px #0005 inset;\n scale: 1.05;\n }\n\n .radio-icon-element {\n transform: scale(1.05);\n filter: drop-shadow(0 16px 4px rgba(0, 0, 0, 0.4));\n }\n}\n\n/* Active state styles */\n.radio-container:active {\n .radio-button {\n box-shadow: 0 calc(var(--radio-border) * 1.5) 6px 4px #0003;\n }\n\n .radio-button::after {\n box-shadow: 0 0 calc(var(--radio-border) / 1) var(--radio-border) #0009\n inset;\n scale: 1;\n }\n\n .radio-icon-element {\n transform: scale(0.95);\n filter: drop-shadow(0 10px 2px rgba(0, 0, 0, 0.4));\n }\n}\n\n/* Pulse animation for glow effect */\n@keyframes pulse {\n 0% {\n transform: perspective(100px) rotateX(10deg) scale(0.8);\n opacity: 0.45;\n }\n 50% {\n transform: perspective(100px) rotateX(10deg) scale(1);\n opacity: 0.75;\n }\n 100% {\n transform: perspective(100px) rotateX(10deg) scale(0.8);\n opacity: 0.45;\n }\n}\n\n/* Color themes */\n.success {\n --radio-bg-hue: 145;\n}\n\n.warning {\n --radio-bg-hue: 40;\n}\n\n.danger {\n --radio-bg-hue: 355;\n}\n\n.info {\n --radio-bg-hue: 200;\n}\n"}

nasty-impala-43

👁 实时预览

📝 源代码