{"html":"\n \n

\n \n \n

\n\n","css":".switch.eby-switch {\n --switch-width: 48px;\n --switch-height: 22px;\n --switch-radius: 4px;\n --switch-bg: #cecece;\n --switch-checked-bg: #f7931a;\n --switch-offset: calc((var(--switch-height) - var(--circle-diameter)) / 2);\n --switch-transition: all 0.2s cubic-bezier(0.27, 0.2, 0.25, 1.51);\n\n --circle-diameter: 16px;\n --circle-radius: 4px;\n --circle-bg: #eeeaea;\n --circle-shadow: 1px 1px 2px rgba(146, 146, 146, 0.45);\n --circle-checked-shadow: -1px 1px 2px rgba(163, 163, 163, 0.45);\n --circle-transition: var(--switch-transition);\n\n --icon-transition: var(--switch-transition);\n --icon-cross-color: #6d6d6d;\n --icon-checkmark-color: #f7931a;\n --icon-cross-size: 10px;\n --icon-checkmark-size: 12px;\n --icon-stroke: 3.1;\n\n --effect-width: calc(var(--circle-diameter) / 2);\n --effect-height: calc(var(--effect-width) / 2 - 1px);\n --effect-bg: var(--circle-bg);\n --effect-border-radius: 2px;\n --effect-transition: all 0.2s ease-in-out;\n}\n\n.switch.eby-switch input {\n display: none;\n}\n.switch.eby-switch {\n display: inline-block;\n vertical-align: middle;\n}\n\n.switch.eby-switch .slider {\n box-sizing: border-box;\n width: var(--switch-width);\n height: var(--switch-height);\n background: var(--switch-bg);\n border-radius: var(--switch-radius);\n display: flex;\n align-items: center;\n position: relative;\n transition: var(--switch-transition);\n cursor: pointer;\n}\n\n.switch.eby-switch .circle {\n width: var(--circle-diameter);\n height: var(--circle-diameter);\n background: var(--circle-bg);\n border-radius: var(--circle-radius);\n box-shadow: var(--circle-shadow);\n display: flex;\n align-items: center;\n justify-content: center;\n transition: var(--circle-transition);\n z-index: 1;\n position: absolute;\n left: var(--switch-offset);\n top: var(--switch-offset);\n overflow: hidden;\n}\n\n.switch.eby-switch .slider::before {\n content: \"\";\n position: absolute;\n width: var(--effect-width);\n height: var(--effect-height);\n left: calc(var(--switch-offset) + (var(--effect-width) / 2));\n top: calc(50% - (var(--effect-height) / 2));\n background: var(--effect-bg);\n border-radius: var(--effect-border-radius);\n transition: var(--effect-transition);\n}\n\n.switch.eby-switch svg {\n position: absolute;\n inset: 0;\n margin: auto;\n width: auto;\n height: auto;\n transition: var(--icon-transition);\n fill: none;\n stroke: currentColor;\n stroke-width: var(--icon-stroke);\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n\n.switch.eby-switch .cross {\n width: var(--icon-cross-size);\n color: var(--icon-cross-color);\n transform: scale(1);\n opacity: 1;\n}\n\n.switch.eby-switch .checkmark {\n width: var(--icon-checkmark-size);\n color: var(--icon-checkmark-color);\n transform: scale(0);\n opacity: 0;\n}\n\n.switch.eby-switch input:checked + .slider {\n background: var(--switch-checked-bg);\n}\n\n.switch.eby-switch input:checked + .slider .checkmark {\n transform: scale(1);\n opacity: 1;\n}\n\n.switch.eby-switch input:checked + .slider .cross {\n transform: scale(0);\n opacity: 0;\n}\n\n.switch.eby-switch input:checked + .slider::before {\n left: calc(\n 100% - var(--effect-width) - (var(--effect-width) / 2) -\n var(--switch-offset)\n );\n}\n\n.switch.eby-switch input:checked + .slider .circle {\n left: calc(100% - var(--circle-diameter) - var(--switch-offset));\n box-shadow: var(--circle-checked-shadow);\n}\n\n.switch.eby-switch input:focus-visible + .slider {\n outline: 2px solid rgba(247, 147, 26, 0.45);\n outline-offset: 2px;\n}\n"}

neat-octopus-77

👁 实时预览

📝 源代码