{"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, #1a1a2e, #16213e);\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.05);\n overflow: hidden;\n}\n\n.cosmos {\n position: absolute;\n inset: 0;\n background: radial-gradient(1px 1px at 10% 10%, #fff 100%, transparent),\n radial-gradient(1px 1px at 20% 20%, #fff 100%, transparent),\n radial-gradient(2px 2px at 30% 30%, #fff 100%, transparent),\n radial-gradient(1px 1px at 40% 40%, #fff 100%, transparent),\n radial-gradient(2px 2px at 50% 50%, #fff 100%, transparent),\n radial-gradient(1px 1px at 60% 60%, #fff 100%, transparent),\n radial-gradient(2px 2px at 70% 70%, #fff 100%, transparent),\n radial-gradient(1px 1px at 80% 80%, #fff 100%, transparent),\n radial-gradient(1px 1px at 90% 90%, #fff 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, #ff6b6b, #4ecdc4);\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(145deg, #fff, #e6e6e6);\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.1);\n border-radius: 50%;\n transition: 0.5s;\n}\n\n.toggle:checked + .slider {\n background: linear-gradient(45deg, #16213e, #1a1a2e);\n}\n\n.toggle:checked + .slider .toggle-orb {\n transform: translateX(70px) rotate(360deg);\n background: linear-gradient(145deg, #4ecdc4, #45b7af);\n}\n\n.toggle:checked + .slider .inner-orb {\n background: linear-gradient(145deg, #45b7af, #3da89f);\n transform: scale(0.9);\n}\n\n.toggle:checked + .slider .ring {\n border-color: rgba(78, 205, 196, 0.3);\n animation: ringPulse 2s infinite;\n}\n\n.energy-line {\n position: absolute;\n width: 100%;\n height: 2px;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(78, 205, 196, 0.5),\n transparent\n );\n transform-origin: left;\n opacity: 0;\n transition: 0.5s;\n}\n\n.energy-line:nth-child(1) {\n top: 20%;\n transform: rotate(15deg);\n}\n.energy-line:nth-child(2) {\n top: 50%;\n transform: rotate(0deg);\n}\n.energy-line:nth-child(3) {\n top: 80%;\n transform: rotate(-15deg);\n}\n\n.toggle:checked + .slider .energy-line {\n opacity: 1;\n animation: energyFlow 2s linear 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: #4ecdc4;\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/* Анимации */\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 energyFlow {\n 0% {\n transform: scaleX(0) translateX(0);\n opacity: 0;\n }\n 50% {\n transform: scaleX(1) translateX(50%);\n opacity: 1;\n }\n 100% {\n transform: scaleX(0) translateX(100%);\n opacity: 0;\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 эффекты */\n.slider:hover .toggle-orb {\n filter: brightness(1.2);\n box-shadow:\n 0 0 20px rgba(78, 205, 196, 0.5),\n 0 0 40px rgba(78, 205, 196, 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/* Активное состояние */\n.toggle:active + .slider .toggle-orb {\n transform: scale(0.95);\n}\n\n/* 3D эффект при наведении */\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/* Тень */\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(78, 205, 196, 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"}

evil-snake-3

👁 实时预览

📝 源代码