{"html":"

\n \n \n

\n \n\n \n \n

\n \n

\n","css":".cyan-radio-group {\n font-family: \"Rajdhani\", \"Courier New\", monospace;\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n padding: 2rem;\n border-radius: 0.5rem;\n max-width: 300px;\n}\n\n.cyan-option {\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n}\n\n.cyan-radio-input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.cyan-selector {\n position: relative;\n width: 2rem;\n height: 2rem;\n border: 2px solid #00f7ff;\n border-radius: 50%;\n margin-right: 1rem;\n transition: all 0.3s ease;\n box-shadow:\n inset 0 0 1rem rgba(0, 247, 255, 0.2),\n 0 0 1rem rgba(0, 247, 255, 0.3);\n background: rgba(5, 10, 20, 0.7);\n}\n\n.cyan-selector::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0);\n width: 1rem;\n height: 1rem;\n border-radius: 50%;\n background: linear-gradient(135deg, #00f7ff, #00a2ff);\n box-shadow: 0 0 1rem rgba(0, 247, 255, 0.8);\n transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);\n opacity: 0;\n}\n\n.cyan-glow {\n position: absolute;\n top: -0.5rem;\n left: -0.5rem;\n right: -0.5rem;\n bottom: -0.5rem;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(0, 247, 255, 0.3), transparent 70%);\n filter: blur(0.5rem);\n opacity: 0;\n transition: opacity 0.3s ease;\n z-index: -1;\n}\n\n.cyan-label {\n font-size: 1.2rem;\n font-weight: 600;\n color: #c0c0ff;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n transition: all 0.3s ease;\n text-shadow: 0 0 0.5rem rgba(100, 0, 255, 0.5);\n}\n\n.cyan-connector {\n position: absolute;\n height: 2px;\n width: 0;\n left: 2.5rem;\n background: linear-gradient(90deg, #00f7ff, transparent);\n transition: width 0.3s ease;\n}\n\n.cyan-option:hover .cyan-selector {\n transform: scale(1.1);\n box-shadow:\n inset 0 0 1.5rem rgba(0, 247, 255, 0.3),\n 0 0 1.5rem rgba(0, 247, 255, 0.5);\n}\n\n.cyan-option:hover .cyan-label {\n color: #00f7ff;\n text-shadow: 0 0 1rem rgba(0, 247, 255, 0.8);\n}\n\n.cyan-option:hover .cyan-glow {\n opacity: 0.5;\n}\n\n.cyan-radio-input:checked + .cyan-selector::before {\n transform: translate(-50%, -50%) scale(1);\n opacity: 1;\n}\n\n.cyan-radio-input:checked ~ .cyan-label {\n color: #00f7ff;\n text-shadow: 0 0 1rem rgba(0, 247, 255, 0.8);\n}\n\n.cyan-radio-input:checked ~ .cyan-glow {\n opacity: 0.7;\n}\n\n.cyan-radio-input:checked ~ .cyan-connector {\n width: 1.5rem;\n}\n\n.cyan-option:active .cyan-selector {\n transform: scale(0.95);\n}\n\n.cyan-radio-input:checked + .cyan-selector {\n animation: pulse 2s infinite;\n}\n\n@keyframes pulse {\n 0%,\n 100% {\n box-shadow:\n inset 0 0 1rem rgba(0, 247, 255, 0.3),\n 0 0 1.5rem rgba(0, 247, 255, 0.5);\n }\n 50% {\n box-shadow:\n inset 0 0 1.5rem rgba(0, 247, 255, 0.4),\n 0 0 2rem rgba(0, 247, 255, 0.7);\n }\n}\n\n.cyan-radio-group:hover .cyan-connector {\n width: 1.5rem;\n}\n"}

nervous-otter-46

👁 实时预览

📝 源代码