{"html":"

\n \n \n \n Easy\n \n \n \n \n Medium\n \n \n \n \n Hard\n \n

\n","css":".quantum-radio {\n position: relative;\n display: flex;\n align-items: center;\n margin-bottom: 20px;\n cursor: pointer;\n}\n.radio-label {\n color: aqua;\n}\n\n.quantum-radio input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n}\n\n.quantum-radio .radio-control {\n position: relative;\n width: 24px;\n height: 24px;\n border: 2px solid #4a4a8a;\n border-radius: 50%;\n margin-right: 15px;\n transition: all 0.3s ease;\n overflow: hidden;\n}\n\n.quantum-radio .radio-control::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n background: conic-gradient(\n from 90deg,\n #00ffcc,\n #00b3ff,\n #0066ff,\n #00b3ff,\n #00ffcc\n );\n border-radius: 50%;\n transform: translate(-50%, -50%) rotate(0deg);\n transition: all 0.4s ease;\n opacity: 0;\n}\n\n.quantum-radio:hover .radio-control {\n border-color: #00ffcc;\n}\n\n.quantum-radio input:checked ~ .radio-control {\n border-color: #00ffcc;\n}\n\n.quantum-radio input:checked ~ .radio-control::before {\n width: 24px;\n height: 24px;\n opacity: 1;\n animation: quantum-spin 2s linear infinite;\n}\n\n.quantum-radio input:checked ~ .radio-control::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 8px;\n background: #00ffcc;\n border-radius: 50%;\n transform: translate(-50%, -50%);\n box-shadow: 0 0 5px #00ffcc;\n}\n\n@keyframes quantum-spin {\n 0% {\n transform: translate(-50%, -50%) rotate(0deg);\n }\n 100% {\n transform: translate(-50%, -50%) rotate(360deg);\n }\n}\n"}

plastic-cheetah-57

👁 实时预览

📝 源代码