{"html":"\n \n \n \n \n","css":".switch {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 64px;\n height: 34px;\n}\n\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #73C0FC;\n transition: .4s;\n border-radius: 30px;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 30px;\n width: 30px;\n border-radius: 20px;\n left: 2px;\n bottom: 2px;\n z-index: 2;\n background-color: #e8e8e8;\n transition: .4s;\n}\n\n.sun svg {\n position: absolute;\n top: 6px;\n left: 36px;\n z-index: 1;\n width: 24px;\n height: 24px;\n}\n\n.moon svg {\n fill: #73C0FC;\n position: absolute;\n top: 5px;\n left: 5px;\n z-index: 1;\n width: 24px;\n height: 24px;\n}\n\n/* .switch:hover */.sun svg {\n animation: rotate 15s linear infinite;\n}\n\n@keyframes rotate {\n \n 0% {\n transform: rotate(0);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n/* .switch:hover */.moon svg {\n animation: tilt 5s linear infinite;\n}\n\n@keyframes tilt {\n \n 0% {\n transform: rotate(0deg);\n }\n\n 25% {\n transform: rotate(-10deg);\n }\n\n 75% {\n transform: rotate(10deg);\n }\n\n 100% {\n transform: rotate(0deg);\n }\n}\n\n.input:checked + .slider {\n background-color: #183153;\n}\n\n.input:focus + .slider {\n box-shadow: 0 0 1px #183153;\n}\n\n.input:checked + .slider:before {\n transform: translateX(30px);\n}"}

honest-stingray-90

👁 实时预览

📝 源代码