{"html":"

TAP TO SPIN

\n \n \n \n\n

\n\n \n \n 01\n PRIME\n \n\n \n \n 02\n SELECT\n \n\n \n \n 03\n ULTRA\n \n

\n","css":":root {\n --accent: #ff3e3e;\n --panel-bg: #1a1a1a;\n --wheel-bg: #2a2a2a;\n --text-active: #ffffff;\n --text-idle: rgba(255, 255, 255, 0.1);\n}\n\n.wheel-selector {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.hint-pop {\n position: absolute;\n top: -40px;\n font-family: \"Inter\", sans-serif;\n font-weight: 800;\n font-size: 0.6rem;\n letter-spacing: 2px;\n color: #888;\n text-transform: uppercase;\n animation: pulseHint 2s infinite ease-in-out;\n pointer-events: none;\n}\n\n@keyframes pulseHint {\n 0%,\n 100% {\n opacity: 0.8;\n transform: translateY(0);\n }\n 50% {\n opacity: 1;\n transform: translateY(-2px);\n }\n}\n\n.radio-input {\n position: relative;\n height: 240px;\n width: 200px;\n background: #111;\n border: 2px solid #333;\n border-radius: 30px;\n overflow: hidden;\n display: flex;\n align-items: center;\n box-shadow:\n 0 20px 50px rgba(0, 0, 0, 0.5),\n inset 0 0 10px rgba(0, 0, 0, 0.8);\n}\n\n.radio-input::after {\n content: \"\";\n position: absolute;\n right: -150px;\n width: 300px;\n height: 300px;\n background: repeating-conic-gradient(\n from 0deg,\n #222 0deg 10deg,\n #252525 10deg 20deg\n );\n border-radius: 50%;\n z-index: 1;\n opacity: 0.5;\n}\n.radio-input::before {\n content: \"\";\n position: absolute;\n left: 15px;\n top: 50%;\n transform: translateY(-50%);\n width: 6px;\n height: 6px;\n background: var(--accent);\n border-radius: 50%;\n z-index: 30;\n box-shadow:\n 0 0 15px var(--accent),\n 0 0 30px var(--accent);\n pointer-events: none;\n}\n\n.radio-input input {\n display: none;\n}\n\n.glass-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.1) 0%,\n rgba(255, 255, 255, 0) 50%,\n rgba(0, 0, 0, 0.2) 100%\n );\n z-index: 25;\n pointer-events: none;\n}\n\n.wheel-label {\n position: absolute;\n left: 40px;\n display: flex;\n flex-direction: column;\n transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);\n transform-origin: 280px center;\n transform: rotate(var(--angle));\n filter: blur(2px);\n opacity: 0.1;\n z-index: 5;\n}\n\n.wheel-label .num {\n font-family: \"Inter\", sans-serif;\n font-weight: 900;\n font-size: 0.7rem;\n color: #ff3e3e;\n margin-bottom: -5px;\n}\n\n.wheel-label .label {\n font-family: \"Inter\", sans-serif;\n font-weight: 900;\n font-size: 2.4rem;\n color: #fff;\n letter-spacing: -2px;\n text-transform: uppercase;\n}\n\n.radio-input:has(#value-1:checked) .wheel-label {\n transform: rotate(calc(var(--angle) + 30deg));\n}\n.radio-input:has(#value-2:checked) .wheel-label {\n transform: rotate(calc(var(--angle) + 0deg));\n}\n.radio-input:has(#value-3:checked) .wheel-label {\n transform: rotate(calc(var(--angle) - 30deg));\n}\n\n.radio-input input:checked + .wheel-label {\n opacity: 1;\n filter: blur(0);\n transform: rotate(0deg) translateX(10px);\n z-index: 10;\n}\n\n.radio-input input:checked + .wheel-label .label {\n text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);\n}\n\n.next-trigger {\n position: absolute;\n inset: 0;\n z-index: -1;\n cursor: pointer;\n}\n.radio-input:has(#value-1:checked) #trigger-for-1,\n.radio-input:has(#value-2:checked) #trigger-for-2,\n.radio-input:has(#value-3:checked) #trigger-for-3 {\n z-index: 100;\n}\n\n/* I improved the version including brushed metallic textures, inner shadows for a \"sunken\" wheel look */\n"}

little-wombat-0

👁 实时预览

📝 源代码