{"html":"

\n \n \n \n React\n \n

\n \n \n \n Angular\n \n

\n \n \n \n Vue\n \n

","css":".radio-button-container {\n display: flex;\n align-items: center;\n gap: 24px;\n}\n\n.radio-button {\n display: inline-block;\n position: relative;\n cursor: pointer;\n}\n\n.radio-button__input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.radio-button__label {\n display: inline-block;\n padding-left: 30px;\n margin-bottom: 10px;\n position: relative;\n font-size: 15px;\n color: #f2f2f2;\n font-weight: 600;\n cursor: pointer;\n text-transform: uppercase;\n transition: all 0.3s ease;\n}\n\n.radio-button__custom {\n position: absolute;\n top: 0;\n left: 0;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n border: 2px solid #555;\n transition: all 0.3s ease;\n}\n\n.radio-button__input:checked + .radio-button__label .radio-button__custom {\n background-color: #4c8bf5;\n border-color: transparent;\n transform: scale(0.8);\n box-shadow: 0 0 20px #4c8bf580;\n}\n\n.radio-button__input:checked + .radio-button__label {\n color: #4c8bf5;\n}\n\n.radio-button__label:hover .radio-button__custom {\n transform: scale(1.2);\n border-color: #4c8bf5;\n box-shadow: 0 0 20px #4c8bf580;\n}\n\n\n\n\n\n"}

moody-dog-23

👁 实时预览

📝 源代码