{"html":"

\n \n \n

","css":".toggle-container {\n --active-color: #1868e3;\n --inactive-color: #d3d3d6;\n position: relative;\n aspect-ratio: 292 / 142;\n height: 1.875em;\n}\n\n.toggle-input {\n appearance: none;\n margin: 0;\n position: absolute;\n z-index: 1;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n cursor: pointer;\n}\n\n.toggle {\n width: 100%;\n height: 100%;\n overflow: visible;\n}\n\n.toggle-background {\n fill: var(--inactive-color);\n transition: fill .4s;\n}\n\n.toggle-input:checked + .toggle .toggle-background {\n fill: var(--active-color);\n}\n\n.toggle-circle-center {\n transform-origin: center;\n transition: transform .6s;\n}\n\n.toggle-input:checked + .toggle .toggle-circle-center {\n transform: translateX(150px);\n}\n\n.toggle-circle {\n transform-origin: center;\n transition: transform .45s;\n backface-visibility: hidden;\n}\n\n.toggle-circle.left {\n transform: scale(1);\n}\n\n.toggle-input:checked + .toggle .toggle-circle.left {\n transform: scale(0);\n}\n\n.toggle-circle.right {\n transform: scale(0);\n}\n\n.toggle-input:checked + .toggle .toggle-circle.right {\n transform: scale(1);\n}\n\n.toggle-icon {\n transition: fill .4s;\n}\n\n.toggle-icon.on {\n fill: var(--inactive-color);\n}\n\n.toggle-input:checked + .toggle .toggle-icon.on {\n fill: #fff;\n}\n\n.toggle-icon.off {\n fill: #eaeaec;\n}\n\n.toggle-input:checked + .toggle .toggle-icon.off {\n fill: var(--active-color);\n}"}

friendly-otter-40

👁 实时预览

📝 源代码