{"html":"\n\n

\n \n \n \n

\n\n

\n \n \n \n

\n\n","css":".toggleSwitch {\n width: 56px;\n height: 56px;\n display: grid;\n border-radius: 50%;\n position: relative;\n place-items: center;\n cursor: pointer;\n transition: transform 0.2s ease;\n line-height: 1;\n overflow: hidden;\n}\n\n#checkboxInput {\n display: none;\n}\n\n.icon {\n grid-column: 1 / 1;\n grid-row: 1 / 1;\n width: 100%;\n height: 100%;\n display: grid;\n place-items: center;\n z-index: 2;\n transform-origin: center center;\n transition:\n transform 500ms ease,\n opacity 300ms ease;\n opacity: 0;\n pointer-events: none;\n}\n\n.icon--moon {\n color: #212121;\n background-color: #e8e8e8;\n border-radius: 50%;\n}\n.icon--sun {\n color: #e8e8e8;\n background-color: #212121;\n border-radius: 50%;\n}\n\n.icon--moon,\n.icon--sun {\n transform: rotate(0deg) scale(0);\n opacity: 0;\n}\n\n#checkboxInput:not(:checked) + .toggleSwitch .icon--sun {\n transform: rotate(360deg) scale(1);\n opacity: 1;\n}\n\n#checkboxInput:not(:checked) + .toggleSwitch .icon--moon {\n transform: rotate(0deg) scale(0);\n opacity: 0;\n}\n\n#checkboxInput:checked + .toggleSwitch .icon--moon {\n transform: rotate(360deg) scale(1);\n opacity: 1;\n}\n\n#checkboxInput:checked + .toggleSwitch .icon--sun {\n transform: rotate(0deg) scale(0);\n opacity: 0;\n}\n\n#checkboxInput:active + .toggleSwitch {\n transform: scale(0.94);\n}\n.icon svg {\n fill: currentColor !important;\n}\n"}

slippery-ape-47

👁 实时预览

📝 源代码