{"html":"

\n \n Value 1\n \n Value 2\n \n Value 3\n

","css":".radio-input {\n display: flex;\n flex-direction: row;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n font-size: 16px;\n font-weight: 600;\n color: white;\n}\n\n.radio-input input[type=\"radio\"] {\n display: none;\n}\n\n.radio-input label {\n display: flex;\n align-items: center;\n padding: 10px;\n border: 1px solid #ccc;\n background-color: #212121;\n border-radius: 5px;\n margin-right: 12px;\n cursor: pointer;\n position: relative;\n transition: all 0.3s ease-in-out;\n}\n\n.radio-input label:before {\n content: \"\";\n display: block;\n position: absolute;\n top: 50%;\n left: 0;\n transform: translate(-50%, -50%);\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: #fff;\n border: 2px solid #ccc;\n transition: all 0.3s ease-in-out;\n}\n\n.radio-input input[type=\"radio\"]:checked + label:before {\n background-color: green;\n top: 0;\n}\n\n.radio-input input[type=\"radio\"]:checked + label {\n background-color: royalblue;\n color: #fff;\n border-color: rgb(129, 235, 129);\n animation: radio-translate 0.5s ease-in-out;\n}\n\n@keyframes radio-translate {\n 0% {\n transform: translateX(0);\n }\n\n 50% {\n transform: translateY(-10px);\n }\n\n 100% {\n transform: translateX(0);\n }\n}\n"}

wonderful-owl-52

👁 实时预览

📝 源代码