{"html":"

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n","css":"section {\n --col-orange: #d17842;\n --col-dark: #0c0f14;\n --col-darkGray: #52555a;\n --col-gray: #aeaeae;\n\n width: fit-content;\n display: flex;\n align-items: center;\n justify-content: space-evenly;\n background-color: var(--col-dark);\n border-radius: 30px;\n}\n.label {\n padding: 8px 18px;\n transition: all 200ms;\n display: inline-block;\n}\n\n.label input[type=\"radio\"] {\n display: none;\n}\n.label > svg {\n transition: all 200ms;\n fill: var(--col-gray);\n width: 14px;\n}\n.label:hover:not(:has(input:checked)) > svg {\n fill: #d17842;\n opacity: 0.6;\n}\n.label::before {\n content: \"\";\n display: block;\n width: 0%;\n height: 2px;\n border-radius: 5px;\n position: relative;\n left: 50%;\n top: 20px;\n background: var(--col-orange);\n transition: all 200ms;\n}\n.label > svg {\n transition: 300ms;\n fill: var(--col-darkGray);\n margin-top: 0;\n}\n.label:has(input:checked) > svg {\n fill: var(--col-orange);\n scale: 1.2;\n margin-top: -5px;\n}\n\n.label:has(input:checked)::before {\n width: 100%;\n left: 0;\n top: 25px;\n}\n"}

lucky-bullfrog-15

👁 实时预览

📝 源代码