{"html":"

\n \n \n

\n \n \n \n

\n \n

\n \n \n \n \n

\n \n

\n OFF\n ON\n

\n","css":".cyber-toggle-wrapper {\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n position: relative;\n padding: 15px;\n}\n\n.cyber-toggle-checkbox {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.cyber-toggle {\n position: relative;\n display: inline-block;\n width: 64px;\n height: 32px;\n cursor: pointer;\n}\n\n.cyber-toggle-track {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: #111;\n border-radius: 16px;\n overflow: hidden;\n box-shadow:\n 0 4px 8px rgba(0, 0, 0, 0.5),\n inset 0 0 4px rgba(0, 0, 0, 0.8);\n transition: all 0.4s cubic-bezier(0.3, 1.5, 0.7, 1);\n}\n\n.cyber-toggle-track::before {\n content: \"\";\n position: absolute;\n inset: 2px;\n border-radius: 14px;\n background: #222;\n box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);\n z-index: 0;\n transition: all 0.4s ease;\n}\n\n.cyber-toggle-track-glow {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(90deg, #03e9f4, #4a00e0);\n opacity: 0;\n border-radius: 16px;\n z-index: 1;\n transition: all 0.4s ease;\n}\n\n.cyber-toggle-thumb {\n position: absolute;\n top: 4px;\n left: 4px;\n width: 24px;\n height: 24px;\n background: #151515;\n border-radius: 50%;\n z-index: 2;\n transition: all 0.4s cubic-bezier(0.3, 1.5, 0.7, 1);\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);\n}\n\n.cyber-toggle-thumb-shadow {\n position: absolute;\n inset: 0;\n border-radius: 50%;\n background: radial-gradient(\n circle at 30% 30%,\n rgba(255, 255, 255, 0.1),\n transparent 70%\n );\n z-index: 1;\n}\n\n.cyber-toggle-thumb-highlight {\n position: absolute;\n inset: 0;\n border-radius: 50%;\n background: radial-gradient(\n circle at 70% 70%,\n rgba(0, 0, 0, 0.2),\n transparent 70%\n );\n z-index: 1;\n}\n\n.cyber-toggle-thumb-icon {\n position: absolute;\n inset: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 2;\n opacity: 0.7;\n transition:\n opacity 0.4s ease,\n transform 0.4s ease;\n}\n\n.cyber-toggle-thumb-icon svg {\n width: 14px;\n height: 14px;\n fill: #555;\n transition:\n fill 0.4s ease,\n transform 0.4s ease;\n}\n\n.cyber-toggle-track-dots {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n padding-right: 10px;\n z-index: 1;\n}\n\n.cyber-toggle-track-dot {\n width: 3px;\n height: 3px;\n border-radius: 50%;\n background: #444;\n margin-left: 3px;\n opacity: 0.5;\n transition: all 0.4s ease;\n}\n\n.cyber-toggle-particles {\n position: absolute;\n inset: 0;\n z-index: 0;\n overflow: hidden;\n pointer-events: none;\n}\n\n.cyber-toggle-particle {\n position: absolute;\n width: 3px;\n height: 3px;\n background: #03e9f4;\n border-radius: 50%;\n opacity: 0;\n filter: blur(1px);\n transition: all 0.3s ease;\n box-shadow: 0 0 4px rgba(3, 233, 244, 0.8);\n}\n\n.cyber-toggle-particle:nth-child(1) {\n top: 15%;\n right: 20%;\n}\n\n.cyber-toggle-particle:nth-child(2) {\n top: 45%;\n right: 30%;\n}\n\n.cyber-toggle-particle:nth-child(3) {\n top: 25%;\n right: 40%;\n}\n\n.cyber-toggle-particle:nth-child(4) {\n top: 60%;\n right: 15%;\n}\n\n.cyber-toggle-labels {\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 8px;\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 1px;\n font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\n}\n\n.cyber-toggle-label-off {\n color: #555;\n transition: all 0.4s ease;\n}\n\n.cyber-toggle-label-on {\n color: #555;\n transition: all 0.4s ease;\n}\n\n/* Stati attivi */\n.cyber-toggle-checkbox:checked + .cyber-toggle .cyber-toggle-track-glow {\n opacity: 0.5;\n}\n\n.cyber-toggle-checkbox:checked + .cyber-toggle .cyber-toggle-thumb {\n left: calc(100% - 28px);\n background: #222;\n}\n\n.cyber-toggle-checkbox:checked + .cyber-toggle .cyber-toggle-thumb-icon {\n transform: rotate(360deg);\n}\n\n.cyber-toggle-checkbox:checked + .cyber-toggle .cyber-toggle-thumb-icon svg {\n fill: #03e9f4;\n}\n\n.cyber-toggle-checkbox:checked + .cyber-toggle .cyber-toggle-track-dot {\n background: #03e9f4;\n box-shadow: 0 0 4px #03e9f4;\n opacity: 1;\n}\n\n.cyber-toggle-checkbox:checked ~ .cyber-toggle-labels .cyber-toggle-label-on {\n color: #03e9f4;\n text-shadow: 0 0 5px rgba(3, 233, 244, 0.5);\n}\n\n.cyber-toggle-checkbox:not(:checked)\n ~ .cyber-toggle-labels\n .cyber-toggle-label-off {\n color: #aaa;\n}\n\n/* Animazione particelle quando attivo */\n.cyber-toggle-checkbox:checked + .cyber-toggle .cyber-toggle-particle {\n opacity: 1;\n animation: cyber-toggle-float 3s infinite alternate;\n}\n\n.cyber-toggle-checkbox:checked\n + .cyber-toggle\n .cyber-toggle-particle:nth-child(1) {\n animation-delay: 0s;\n}\n\n.cyber-toggle-checkbox:checked\n + .cyber-toggle\n .cyber-toggle-particle:nth-child(2) {\n animation-delay: 0.5s;\n}\n\n.cyber-toggle-checkbox:checked\n + .cyber-toggle\n .cyber-toggle-particle:nth-child(3) {\n animation-delay: 1s;\n}\n\n.cyber-toggle-checkbox:checked\n + .cyber-toggle\n .cyber-toggle-particle:nth-child(4) {\n animation-delay: 1.5s;\n}\n\n/* Effetto hover */\n.cyber-toggle:hover .cyber-toggle-track::before {\n background: #272727;\n}\n\n.cyber-toggle:hover .cyber-toggle-thumb {\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);\n}\n\n.cyber-toggle-checkbox:checked + .cyber-toggle:hover .cyber-toggle-track-glow {\n opacity: 0.7;\n}\n\n/* Effetto focus per accessibilità */\n.cyber-toggle-checkbox:focus + .cyber-toggle {\n outline: none;\n}\n\n.cyber-toggle-checkbox:focus + .cyber-toggle::after {\n content: \"\";\n position: absolute;\n inset: -4px;\n border-radius: 20px;\n border: 2px solid rgba(3, 233, 244, 0.5);\n opacity: 0.5;\n}\n\n@keyframes cyber-toggle-float {\n 0% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-4px);\n }\n 100% {\n transform: translateY(0);\n }\n}\n"}

brown-panda-75

👁 实时预览

📝 源代码