{"html":"\n \n \n

\n \n \n\n","css":"/* Theme Switch */\n/* The switch - the box around the slider */\n.switch {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 4em;\n height: 2.2em;\n border-radius: 30px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #2a2a2a;\n transition: 0.4s;\n border-radius: 30px;\n overflow: hidden;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 1.2em;\n width: 1.2em;\n border-radius: 20px;\n left: 0.5em;\n bottom: 0.5em;\n transition: 0.4s;\n transition-timing-function: cubic-bezier(0.81, -0.04, 0.38, 1.5);\n box-shadow: inset 8px -4px 0px 0px #fff;\n}\n\n.switch input:checked + .slider {\n background-color: #00a6ff;\n}\n\n.switch input:checked + .slider:before {\n transform: translateX(1.8em);\n box-shadow: inset 15px -4px 0px 15px #ffcf48;\n}\n\n.star {\n background-color: #fff;\n border-radius: 50%;\n position: absolute;\n width: 5px;\n transition: all 0.4s;\n height: 5px;\n}\n\n.star_1 {\n left: 2.5em;\n top: 0.5em;\n}\n\n.star_2 {\n left: 2.2em;\n top: 1.2em;\n}\n\n.star_3 {\n left: 3em;\n top: 0.9em;\n}\n\n.switch input:checked ~ .slider .star {\n opacity: 0;\n}\n\n.cloud {\n width: 3.5em;\n position: absolute;\n bottom: -1.4em;\n left: -1.1em;\n opacity: 0;\n transition: all 0.4s;\n}\n\n.switch input:checked ~ .slider .cloud {\n opacity: 1;\n}\n"}

red-dingo-61

👁 实时预览

📝 源代码