{"html":"\n \n

\n\n","css":".cosmic-toggle {\n position: relative;\n width: 140px;\n height: 70px;\n transform-style: preserve-3d;\n perspective: 500px;\n}\n\n.toggle {\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: linear-gradient(45deg, #ffcc00, #ff9900); /* Yellow gradient */\n border-radius: 35px;\n transition: 0.5s;\n transform-style: preserve-3d;\n box-shadow:\n 0 0 20px rgba(0, 0, 0, 0.5),\n inset 0 0 15px rgba(255, 255, 255, 0.1);\n overflow: hidden;\n}\n\n.cosmos {\n position: absolute;\n inset: 0;\n background: radial-gradient(1px 1px at 10% 10%, #ffffff 100%, transparent),\n radial-gradient(1px 1px at 20% 20%, #ffffff 100%, transparent),\n radial-gradient(2px 2px at 30% 30%, #ffffff 100%, transparent),\n radial-gradient(1px 1px at 40% 40%, #ffffff 100%, transparent),\n radial-gradient(2px 2px at 50% 50%, #ffffff 100%, transparent),\n radial-gradient(1px 1px at 60% 60%, #ffffff 100%, transparent),\n radial-gradient(2px 2px at 70% 70%, #ffffff 100%, transparent),\n radial-gradient(1px 1px at 80% 80%, #ffffff 100%, transparent),\n radial-gradient(1px 1px at 90% 90%, #ffffff 100%, transparent);\n background-size: 200% 200%;\n opacity: 0.1;\n transition: 0.5s;\n}\n\n.toggle-orb {\n position: absolute;\n height: 62px;\n width: 62px;\n left: 4px;\n bottom: 4px;\n background: linear-gradient(145deg, #ffcc00, #ff9900); /* Yellow gradient */\n border-radius: 50%;\n transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n transform-style: preserve-3d;\n z-index: 2;\n}\n\n.inner-orb {\n position: absolute;\n inset: 5px;\n border-radius: 50%;\n background: linear-gradient(\n 145deg,\n #ffffff,\n #e6e6e6\n ); /* White to light gray */\n transition: 0.5s;\n overflow: hidden;\n}\n\n.inner-orb::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: repeating-conic-gradient(\n from 0deg,\n transparent 0deg,\n rgba(0, 0, 0, 0.1) 10deg,\n transparent 20deg\n );\n animation: patternRotate 10s linear infinite;\n}\n\n.ring {\n position: absolute;\n inset: -3px;\n border: 2px solid rgba(255, 255, 255, 0.3); /* Lighter border for contrast */\n border-radius: 50%;\n transition: 0.5s;\n}\n\n.toggle:checked + .slider {\n background: linear-gradient(\n 45deg,\n #ff9900,\n #ffcc00\n ); /* Reverse gradient for checked state */\n}\n\n.toggle:checked + .slider .toggle-orb {\n transform: translateX(70px) rotate(360deg);\n background: linear-gradient(\n 145deg,\n #ff9900,\n #ffcc00\n ); /* Lighter yellow gradient */\n}\n\n.toggle:checked + .slider .inner-orb {\n background: linear-gradient(\n 145deg,\n #e6e6e6,\n #ffffff\n ); /* Light gray to white */\n transform: scale(0.9);\n}\n\n.toggle:checked + .slider .ring {\n border-color: rgba(255, 255, 255, 0.5); /* Brighter border on checked */\n animation: ringPulse 2s infinite;\n}\n\n.particles {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n\n.particle {\n position: absolute;\n width: 4px;\n height: 4px;\n background: #ffcc00; /* Yellow particles */\n border-radius: 50%;\n opacity: 0;\n}\n\n.toggle:checked + .slider .particle {\n animation: particleBurst 1s ease-out infinite;\n}\n\n.particle:nth-child(1) {\n left: 20%;\n animation-delay: 0s;\n}\n.particle:nth-child(2) {\n left: 40%;\n animation-delay: 0.2s;\n}\n.particle:nth-child(3) {\n left: 60%;\n animation-delay: 0.4s;\n}\n.particle:nth-child(4) {\n left: 80%;\n animation-delay: 0.6s;\n}\n.particle:nth-child(5) {\n left: 30%;\n animation-delay: 0.8s;\n}\n.particle:nth-child(6) {\n left: 70%;\n animation-delay: 1s;\n}\n\n/* Animations */\n@keyframes ringPulse {\n 0%,\n 100% {\n transform: scale(1);\n opacity: 0.3;\n }\n 50% {\n transform: scale(1.1);\n opacity: 0.6;\n }\n}\n\n@keyframes patternRotate {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes particleBurst {\n 0% {\n transform: translate(0, 0) scale(1);\n opacity: 1;\n }\n 100% {\n transform: translate(\n calc(cos(var(--angle)) * 50px),\n calc(sin(var(--angle)) * 50px)\n )\n scale(0);\n opacity: 0;\n }\n}\n\n/* Hover effects */\n.slider:hover .toggle-orb {\n filter: brightness(1.2);\n box-shadow:\n 0 0 20px rgba(255, 255, 255, 0.5),\n 0 0 40px rgba(255, 255, 255, 0.3);\n}\n\n.slider:hover .cosmos {\n opacity: 0.2;\n animation: cosmosPan 20s linear infinite;\n}\n\n@keyframes cosmosPan {\n 0% {\n background-position: 0% 0%;\n }\n 100% {\n background-position: 200% 200%;\n }\n}\n\n/* Active state */\n.toggle:active + .slider .toggle-orb {\n transform: scale(0.95);\n}\n\n/* 3D effect on hover */\n.cosmic-toggle:hover .slider {\n transform: rotateX(10deg) rotateY(10deg);\n}\n\n.cosmic-toggle:hover .toggle-orb {\n transform: translateZ(10px);\n}\n\n/* Shadow */\n.toggle:checked + .slider::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: radial-gradient(\n circle at var(--x) var(--y),\n rgba(255, 255, 255, 0.2),\n transparent 50%\n );\n opacity: 0;\n animation: glowFollow 2s linear infinite;\n}\n\n@keyframes glowFollow {\n 0%,\n 100% {\n opacity: 0.2;\n }\n 50% {\n opacity: 0.5;\n }\n}\n"}

tidy-turtle-66

👁 实时预览

📝 源代码