{"html":"\n \n

\n\n","css":".toggle-checkbox {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n.toggle-slot {\n font-size: 10px;\n position: relative;\n height: 3.5em;\n width: 7em;\n border: 0px solid transparent;\n border-radius: 10em;\n background-color: white;\n transition: background-color 250ms;\n}\n\n.toggle-checkbox:checked ~ .toggle-slot {\n background-color: #374151;\n}\n\n.toggle-button {\n transform: translate(0.3em, 0.25em);\n position: absolute;\n height: 3em;\n width: 3em;\n border-radius: 50%;\n background-color: #ffeccf;\n box-shadow: inset 0px 0px 0px 0.75em #ffbb52;\n transition: background-color 250ms, border-color 250ms, transform 500ms cubic-bezier(.26,2,.46,.71);\n}\n\n.toggle-checkbox:checked ~ .toggle-slot .toggle-button {\n background-color: #485367;\n box-shadow: inset 0px 0px 0px 0.75em white;\n transform: translate(3.65em, 0.25em);\n}\n\n.sun-icon {\n position: absolute;\n height: 6em;\n width: 6em;\n color: #ffbb52;\n}\n\n.sun-icon-wrapper {\n position: absolute;\n height: 6em;\n width: 6em;\n opacity: 1;\n transform: translate(2em, 2em) rotate(15deg);\n transform-origin: 50% 50%;\n transition: opacity 150ms, transform 500ms cubic-bezier(.26,2,.46,.71);\n}\n\n.toggle-checkbox:checked ~ .toggle-slot .sun-icon-wrapper {\n opacity: 0;\n transform: translate(3em, 2em) rotate(0deg);\n}\n\n.moon-icon {\n position: absolute;\n height: 6em;\n width: 6em;\n color: white;\n}\n\n.moon-icon-wrapper {\n position: absolute;\n height: 6em;\n width: 6em;\n opacity: 0;\n transform: translate(11em, 2em) rotate(0deg);\n transform-origin: 50% 50%;\n transition: opacity 150ms, transform 500ms cubic-bezier(.26,2.5,.46,.71);\n}\n\n.toggle-checkbox:checked ~ .toggle-slot .moon-icon-wrapper {\n opacity: 1;\n transform: translate(2em, 2em) rotate(-15deg);\n}"}

smooth-frog-53

👁 实时预览

📝 源代码