{"html":"\n \n

\n ✔\n ✖\n

\n\n","css":".toggle-label {\n cursor: pointer;\n}\n\n.toggle-container {\n position: relative;\n width: 70px;\n height: 36px;\n border-radius: 20px;\n background: linear-gradient(90deg, #ff0000, #ff7f00);\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\n overflow: hidden;\n transition:\n background-color 0.6s ease-in-out,\n box-shadow 0.4s ease;\n}\n\n.toggle {\n position: absolute;\n width: 36px;\n height: 36px;\n border-radius: 50%;\n background: radial-gradient(circle, #fff, #e0e0e0);\n top: 0;\n left: 0;\n transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);\n box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.icon {\n position: absolute;\n font-size: 20px;\n transition:\n opacity 0.4s ease,\n transform 0.4s ease;\n}\n\n.check {\n opacity: 0;\n transform: scale(0);\n}\n\n.cross {\n opacity: 1;\n transform: scale(1);\n}\n\n.toggle-input {\n display: none;\n}\n\n.toggle-input:checked + .toggle-container {\n background: linear-gradient(90deg, #4caf50, #81c784);\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);\n}\n\n.toggle-input:checked + .toggle-container .toggle {\n transform: translateX(34px);\n}\n\n.toggle-input:checked + .toggle-container .toggle .check {\n opacity: 1;\n transform: scale(1);\n}\n\n.toggle-input:checked + .toggle-container .toggle .cross {\n opacity: 0;\n transform: scale(0);\n}\n\n.toggle-container:active .toggle {\n transform: scale(0.95);\n}\n"}

purple-fox-33

👁 实时预览

📝 源代码