{"html":"

\n \n \n \n

\n \n \n

\n","css":".theme-toggle-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 600px;\n height: 100%;\n margin: 0;\n transition: 0.6s ease-in-out;\n font-family: \"Arial\", sans-serif;\n}\n\n.theme-toggle-wrapper .toggle-switch {\n position: relative;\n display: inline-block;\n width: 80px;\n height: 40px;\n transform: scale(1.2);\n transition: transform 0.2s;\n}\n\n.theme-toggle-wrapper .toggle-switch:hover {\n transform: scale(1.3);\n}\n\n.theme-toggle-wrapper .toggle-switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.theme-toggle-wrapper .slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(145deg, #f1c40f, #f39c12);\n transition: 0.4s;\n border-radius: 34px;\n box-shadow: 0 0 15px rgba(241, 196, 15, 0.5);\n}\n\n.theme-toggle-wrapper .slider:before {\n position: absolute;\n content: \"☀️\";\n height: 32px;\n width: 32px;\n left: 4px;\n bottom: 4px;\n background: white;\n transition: 0.4s;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n z-index: 2;\n}\n\n.theme-toggle-wrapper input:checked + .slider {\n background: linear-gradient(145deg, #2c3e50, #34495e);\n box-shadow: 0 0 15px rgba(44, 62, 80, 0.5);\n}\n\n.theme-toggle-wrapper input:checked + .slider:before {\n transform: translateX(40px);\n content: \"🌙\";\n}\n\n.theme-toggle-wrapper .clouds {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n pointer-events: none;\n}\n\n.theme-toggle-wrapper .cloud {\n position: absolute;\n width: 20px;\n height: 20px;\n fill: rgba(255, 255, 255, 0.8);\n transition: all 0.4s ease;\n filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.1));\n}\n\n.theme-toggle-wrapper .cloud1 {\n top: 10px;\n left: 10px;\n animation: floatCloud1 8s infinite linear;\n}\n\n.theme-toggle-wrapper .cloud2 {\n top: 15px;\n left: 40px;\n transform: scale(0.8);\n animation: floatCloud2 12s infinite linear;\n}\n\n@keyframes floatCloud1 {\n 0% {\n transform: translateX(-20px);\n opacity: 0;\n }\n 20% {\n opacity: 1;\n }\n 80% {\n opacity: 1;\n }\n 100% {\n transform: translateX(80px);\n opacity: 0;\n }\n}\n\n@keyframes floatCloud2 {\n 0% {\n transform: translateX(-20px) scale(0.8);\n opacity: 0;\n }\n 20% {\n opacity: 0.7;\n }\n 80% {\n opacity: 0.7;\n }\n 100% {\n transform: translateX(80px) scale(0.8);\n opacity: 0;\n }\n}\n\n.theme-toggle-wrapper input:checked + .slider .cloud {\n opacity: 0;\n transform: translateY(-20px);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .theme-toggle-wrapper .cloud {\n animation: none;\n }\n}\n"}

soft-puma-51

👁 实时预览

📝 源代码