{"html":"

\n \n \n \n Option 1\n \n \n \n \n Option 2\n \n \n \n \n Option 3\n \n

\n","css":".custom-radio-group {\n display: flex;\n flex-direction: column;\n gap: 12px;\n width: 320px;\n border-radius: 12px;\n background: rgba(0, 0, 0, 0.2);\n padding: 16px;\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);\n}\n.custom-radio-container {\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer;\n padding: 12px 20px;\n border-radius: 8px;\n background-color: rgba(255, 255, 255, 0.2);\n transition:\n background-color 0.3s ease,\n transform 0.3s ease,\n box-shadow 0.3s ease;\n font-size: 16px;\n color: #333333;\n user-select: none;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n.custom-radio-container:hover {\n background-color: rgba(255, 255, 255, 0.3);\n transform: scale(1.03);\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);\n}\n.custom-radio-container input[type=\"radio\"] {\n opacity: 0;\n position: absolute;\n}\n.custom-radio-checkmark {\n position: relative;\n height: 24px;\n width: 24px;\n border: 2px solid #ffffff;\n border-radius: 50%;\n background-color: rgba(0, 0, 0, 0.3);\n transition:\n background-color 0.4s ease,\n transform 0.4s ease;\n margin-right: 12px;\n display: inline-block;\n vertical-align: middle;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);\n}\n.custom-radio-container input[type=\"radio\"]:checked + .custom-radio-checkmark {\n background-color: #ffffff;\n border-color: #007bff;\n box-shadow: 0 0 0 8px rgba(0, 123, 255, 0.2);\n transform: scale(1.2);\n animation: pulse 0.6s forwards;\n}\n.custom-radio-checkmark::after {\n content: \"\";\n position: absolute;\n display: none;\n}\n.custom-radio-container\n input[type=\"radio\"]:checked\n + .custom-radio-checkmark::after {\n display: block;\n left: 50%;\n top: 50%;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: #007bff;\n transform: translate(-50%, -50%);\n}\n@keyframes pulse {\n 0% {\n transform: scale(1.2);\n }\n 50% {\n transform: scale(1.4);\n }\n 100% {\n transform: scale(1.2);\n }\n}\n"}

smart-fox-51

👁 实时预览

📝 源代码