{"html":"\n \n

\n \n \n","css":".switch-name {\n --dark-sky: #5050e5;\n --moon: #ffd365;\n --light-sky: #35d5e5;\n --sun: #ffed89;\n display: inline-block;\n position: relative;\n border-radius: 5em;\n cursor: pointer;\n width: 80px;\n height: 40px;\n overflow: hidden;\n transition: all .5s;\n}\n\n.switch-name .back {\n background-color: var(--dark-sky);\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n transition: .5s ease-in-out;\n}\n\n.switch-name .checkbox {\n opacity: 0;\n}\n\n.switch-name .checkbox:checked ~ .back {\n background-color: var(--light-sky);\n}\n\n.switch-name .checkbox:checked ~ .moon {\n transform: translate(100%) rotate(180deg);\n opacity: 0;\n}\n\n.switch-name .checkbox:checked ~ .sun {\n transform: translate(100%) rotate(180deg);\n opacity: 1;\n}\n\n.switch-name .moon {\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n padding: .4em;\n fill: var(--moon);\n transition: .5s;\n}\n\n.switch-name .sun {\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n padding: .4em;\n fill: var(--sun);\n transition: .5s;\n opacity: 0;\n}"}

brown-termite-67

👁 实时预览

📝 源代码