{"html":"\n \n

\n \n \n \n \n \n \n\n \n \n \n \n \n \n

\n \n \n \n \n

\n\n","css":".switch {\n position: relative;\n display: inline-block;\n width: 60px;\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: #2196f3;\n -webkit-transition: 0.4s;\n transition: 0.4s;\n z-index: 0;\n overflow: hidden;\n}\n\n.sun-moon {\n position: absolute;\n content: \"\";\n height: 26px;\n width: 26px;\n left: 4px;\n bottom: 4px;\n background-color: yellow;\n -webkit-transition: 0.4s;\n transition: 0.4s;\n}\n\n#input:checked + .slider {\n background-color: black;\n}\n\n#input:focus + .slider {\n box-shadow: 0 0 1px #2196f3;\n}\n\n#input:checked + .slider .sun-moon {\n -webkit-transform: translateX(26px);\n -ms-transform: translateX(26px);\n transform: translateX(26px);\n background-color: white;\n -webkit-animation: rotate-center 0.6s ease-in-out both;\n animation: rotate-center 0.6s ease-in-out both;\n}\n\n.moon-dot {\n opacity: 0;\n transition: 0.4s;\n fill: gray;\n}\n\n#input:checked + .slider .sun-moon .moon-dot {\n opacity: 1;\n}\n\n.slider.round {\n border-radius: 34px;\n}\n\n.slider.round .sun-moon {\n border-radius: 50%;\n}\n\n#moon-dot-1 {\n left: 10px;\n top: 3px;\n position: absolute;\n width: 6px;\n height: 6px;\n z-index: 4;\n}\n\n#moon-dot-2 {\n left: 2px;\n top: 10px;\n position: absolute;\n width: 10px;\n height: 10px;\n z-index: 4;\n}\n\n#moon-dot-3 {\n left: 16px;\n top: 18px;\n position: absolute;\n width: 3px;\n height: 3px;\n z-index: 4;\n}\n\n#light-ray-1 {\n left: -8px;\n top: -8px;\n position: absolute;\n width: 43px;\n height: 43px;\n z-index: -1;\n fill: white;\n opacity: 10%;\n}\n\n#light-ray-2 {\n left: -50%;\n top: -50%;\n position: absolute;\n width: 55px;\n height: 55px;\n z-index: -1;\n fill: white;\n opacity: 10%;\n}\n\n#light-ray-3 {\n left: -18px;\n top: -18px;\n position: absolute;\n width: 60px;\n height: 60px;\n z-index: -1;\n fill: white;\n opacity: 10%;\n}\n\n.cloud-light {\n position: absolute;\n fill: #eee;\n animation-name: cloud-move;\n animation-duration: 6s;\n animation-iteration-count: infinite;\n}\n\n.cloud-dark {\n position: absolute;\n fill: #ccc;\n animation-name: cloud-move;\n animation-duration: 6s;\n animation-iteration-count: infinite;\n animation-delay: 1s;\n}\n\n#cloud-1 {\n left: 30px;\n top: 15px;\n width: 40px;\n}\n\n#cloud-2 {\n left: 44px;\n top: 10px;\n width: 20px;\n}\n\n#cloud-3 {\n left: 18px;\n top: 24px;\n width: 30px;\n}\n\n#cloud-4 {\n left: 36px;\n top: 18px;\n width: 40px;\n}\n\n#cloud-5 {\n left: 48px;\n top: 14px;\n width: 20px;\n}\n\n#cloud-6 {\n left: 22px;\n top: 26px;\n width: 30px;\n}\n\n@keyframes cloud-move {\n 0% {\n transform: translateX(0px);\n }\n\n 40% {\n transform: translateX(4px);\n }\n\n 80% {\n transform: translateX(-4px);\n }\n\n 100% {\n transform: translateX(0px);\n }\n}\n\n.stars {\n transform: translateY(-32px);\n opacity: 0;\n transition: 0.4s;\n}\n\n.star {\n fill: white;\n position: absolute;\n -webkit-transition: 0.4s;\n transition: 0.4s;\n animation-name: star-twinkle;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n}\n\n#input:checked + .slider .stars {\n -webkit-transform: translateY(0);\n -ms-transform: translateY(0);\n transform: translateY(0);\n opacity: 1;\n}\n\n#star-1 {\n width: 20px;\n top: 2px;\n left: 3px;\n animation-delay: 0.3s;\n}\n\n#star-2 {\n width: 6px;\n top: 16px;\n left: 3px;\n}\n\n#star-3 {\n width: 12px;\n top: 20px;\n left: 10px;\n animation-delay: 0.6s;\n}\n\n#star-4 {\n width: 18px;\n top: 0px;\n left: 18px;\n animation-delay: 1.3s;\n}\n\n@keyframes star-twinkle {\n 0% {\n transform: scale(1);\n }\n\n 40% {\n transform: scale(1.2);\n }\n\n 80% {\n transform: scale(0.8);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n"}

jolly-chicken-91

👁 实时预览

📝 源代码