{"html":"\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n","css":"/* a clone from joshwcomeau.com \n * but this version runs on pure CSS\n */\n\n.themeToggle {\n color: #bbb;\n width: 3em;\n}\n\n.st-sunMoonThemeToggleBtn {\n position: relative;\n cursor: pointer;\n}\n\n.st-sunMoonThemeToggleBtn .themeToggleInput {\n opacity: 0;\n width: 100%;\n aspect-ratio: 1;\n}\n\n.st-sunMoonThemeToggleBtn svg {\n position: absolute;\n left: 0;\n width: 100%;\n height: 100%;\n transition: transform 0.4s ease;\n transform: rotate(40deg);\n}\n\n.st-sunMoonThemeToggleBtn svg .sunMoon {\n transform-origin: center center;\n transition: inherit;\n transform: scale(1);\n}\n\n.st-sunMoonThemeToggleBtn svg .sunRay {\n transform-origin: center center;\n transform: scale(0);\n}\n\n.st-sunMoonThemeToggleBtn svg mask > circle {\n transition: transform 0.64s cubic-bezier(0.41, 0.64, 0.32, 1.575);\n transform: translate(0px, 0px);\n}\n\n.st-sunMoonThemeToggleBtn svg .sunRay2 {\n animation-delay: 0.05s !important;\n}\n.st-sunMoonThemeToggleBtn svg .sunRay3 {\n animation-delay: 0.1s !important;\n}\n.st-sunMoonThemeToggleBtn svg .sunRay4 {\n animation-delay: 0.17s !important;\n}\n.st-sunMoonThemeToggleBtn svg .sunRay5 {\n animation-delay: 0.25s !important;\n}\n.st-sunMoonThemeToggleBtn svg .sunRay5 {\n animation-delay: 0.29s !important;\n}\n\n.st-sunMoonThemeToggleBtn .themeToggleInput:checked + svg {\n transform: rotate(90deg);\n}\n.st-sunMoonThemeToggleBtn .themeToggleInput:checked + svg mask > circle {\n transform: translate(16px, -3px);\n}\n.st-sunMoonThemeToggleBtn .themeToggleInput:checked + svg .sunMoon {\n transform: scale(0.55);\n}\n.st-sunMoonThemeToggleBtn .themeToggleInput:checked + svg .sunRay {\n animation: showRay1832 0.4s ease 0s 1 forwards;\n}\n\n@keyframes showRay1832 {\n 0% {\n transform: scale(0);\n }\n 100% {\n transform: scale(1);\n }\n}\n"}

happy-mule-45

👁 实时预览

📝 源代码