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

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

\n \n\n","css":".switch {\n position: relative;\n display: inline-block;\n width: 90px;\n height: 40px;\n border: 1px solid rgb(58, 58, 58);\n border-radius: 22px;\n}\n\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.slider {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: black;\n border-radius: 20px;\n transition: 0.4s;\n overflow: hidden;\n z-index: 2;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 30px;\n width: 30px;\n left: 4px;\n bottom: 5px;\n background-color: white;\n transition: 1s;\n border-radius: 50%;\n overflow: hidden;\n}\n\n.moons-hole {\n content: \"\";\n position: absolute;\n opacity: 1;\n transition: 1s;\n}\n\n.moon-hole {\n position: absolute;\n border-radius: 50%;\n transform: translateX(0px);\n}\n\n.moon-hole:nth-child(1) {\n background-color: rgb(85, 85, 85);\n height: 5px;\n width: 5px;\n top: 26px;\n left: 20px;\n}\n\n.moon-hole:nth-child(2) {\n background-color: rgb(85, 85, 85);\n height: 10px;\n width: 10px;\n top: 16px;\n left: 7px;\n}\n\n.moon-hole:nth-child(3) {\n background-color: rgb(85, 85, 85);\n height: 4px;\n width: 4px;\n top: 12px;\n left: 21px;\n}\n\ninput:checked + .slider {\n background-color: #62cff0;\n}\n\ninput:checked + .slider:before {\n transform: translateX(52px);\n background-color: orange;\n}\n\ninput:checked + .slider .moons-hole {\n transform: translateX(52px);\n opacity: 0;\n}\n\n.stars {\n right: 6px;\n top: 0;\n bottom: 0;\n transition: 1s;\n transform: translateY(0px);\n}\n\n.star {\n position: absolute;\n fill: white;\n animation: star-twinkle 2s infinite;\n opacity: 1;\n}\n\n/* Posizionamento casuale dei puntini */\n.star:nth-child(1) {\n top: 5px;\n right: 29px;\n width: 20px;\n animation-delay: 0.3s;\n}\n\n.star:nth-child(2) {\n top: 18px;\n right: 9px;\n width: 15px;\n}\n\n.star:nth-child(3) {\n top: 5px;\n right: 15px;\n width: 10px;\n animation-delay: 0.6s;\n}\n\n.star:nth-child(4) {\n top: 26px;\n right: 28px;\n width: 12px;\n animation-delay: 0.9s;\n}\n\n.star:nth-child(5) {\n top: 2px;\n right: 50px;\n width: 8px;\n animation-delay: 1.2s;\n}\n\ninput:checked + .slider .stars {\n transform: translateY(-32px);\n opacity: 0;\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\n.clouds {\n position: absolute;\n left: 6px;\n top: 0;\n bottom: 0;\n width: 20px;\n transition: 1s;\n transform: translateX(-55px);\n}\n\n.black-clouds {\n position: absolute;\n left: 6px;\n top: 0;\n bottom: 0;\n width: 20px;\n transition: 1s;\n transform: translateX(-55px);\n opacity: 0;\n z-index: 0;\n}\n\n.black-cloud {\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: #555; /* Grigio più scuro per simulare nuvola */\n opacity: 60%;\n border-radius: 50%;\n animation: cloud-move 6s infinite;\n animation-delay: 1s;\n}\n\n.black-cloud:nth-child(1) {\n top: 1px;\n right: 3px;\n}\n\n.black-cloud:nth-child(2) {\n top: 15px;\n left: 9px;\n}\n\n.black-cloud:nth-child(3) {\n top: 20px;\n left: 27px;\n}\n\ninput:checked + .slider .black-clouds {\n transform: translateX(32px);\n opacity: 1;\n}\n\n.cloud {\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: white;\n border-radius: 50%;\n z-index: 1;\n animation: cloud-move 6s infinite;\n}\n\n.cloud:nth-child(1) {\n top: 0;\n height: 21px;\n width: 21px;\n right: 14px;\n}\n\n.cloud:nth-child(2) {\n height: 25px;\n width: 25px;\n border-radius: 50%;\n top: 14px;\n right: 6px;\n}\n\n.cloud:nth-child(3) {\n height: 23px;\n width: 23px;\n top: 28px;\n left: 4px;\n}\n\n.cloud:nth-child(4) {\n top: 26px;\n left: 20px;\n}\n\n.cloud:nth-child(5) {\n top: 30px;\n left: 30px;\n}\n\n.cloud:nth-child(6) {\n top: 27px;\n left: 46px;\n}\n\n.cloud:nth-child(7) {\n top: 31px;\n left: 58px;\n}\n\ninput:checked + .slider .clouds {\n transform: translateX(32px);\n opacity: 1;\n}\n\n@keyframes cloud-move {\n 0% {\n transform: translateX(-32px);\n }\n\n 40% {\n transform: translateX(-36px);\n }\n\n 80% {\n transform: translateX(-28px);\n }\n\n 100% {\n transform: translateX(-32px);\n }\n}\n"}

horrible-swan-62

👁 实时预览

📝 源代码