{"html":"

\n \n \n \n \n Next\n \n

\n \n \n \n \n Svelte\n \n

\n \n \n \n \n Remix\n \n

","css":".radio-buttons-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: 16px;\n color: #fff;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.radio-button__custom {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n width: 20px;\n height: 20px;\n border-radius: 50%;\n border: 2px solid #555;\n transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.radio-button__input:checked + .radio-button__label .radio-button__custom {\n transform: translateY(-50%) scale(0.9);\n border: 5px solid #4c8bf5;\n color: #4c8bf5;\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: translateY(-50%) scale(1.2);\n border-color: #4c8bf5;\n box-shadow: 0 0 10px #4c8bf580;\n}\n\n"}

curvy-vampirebat-60

👁 实时预览

📝 源代码