{"html":"

\n \n \n

\n\n

\n \n

\n","css":".neo-toggle-container {\n --toggle-width: 80px;\n --toggle-height: 38px;\n --toggle-bg: #181c20;\n --toggle-off-color: #475057;\n --toggle-on-color: #36f9c7;\n --toggle-transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);\n\n position: relative;\n display: inline-flex;\n flex-direction: column;\n font-family: \"Segoe UI\", Tahoma, sans-serif;\n user-select: none;\n}\n\n.neo-toggle-input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.neo-toggle {\n position: relative;\n width: var(--toggle-width);\n height: var(--toggle-height);\n display: block;\n cursor: pointer;\n transform: translateZ(0);\n perspective: 500px;\n}\n\n/* Track styles */\n.neo-track {\n position: absolute;\n inset: 0;\n border-radius: calc(var(--toggle-height) / 2);\n overflow: hidden;\n transform-style: preserve-3d;\n transform: translateZ(-1px);\n transition: transform var(--toggle-transition);\n box-shadow:\n 0 2px 10px rgba(0, 0, 0, 0.5),\n inset 0 0 0 1px rgba(255, 255, 255, 0.1);\n}\n\n.neo-background-layer {\n position: absolute;\n inset: 0;\n background: var(--toggle-bg);\n background-image: linear-gradient(\n -45deg,\n rgba(20, 20, 20, 0.8) 0%,\n rgba(30, 30, 30, 0.3) 50%,\n rgba(20, 20, 20, 0.8) 100%\n );\n opacity: 1;\n transition: all var(--toggle-transition);\n}\n\n.neo-grid-layer {\n position: absolute;\n inset: 0;\n background-image: linear-gradient(\n to right,\n rgba(71, 80, 87, 0.05) 1px,\n transparent 1px\n ),\n linear-gradient(to bottom, rgba(71, 80, 87, 0.05) 1px, transparent 1px);\n background-size: 5px 5px;\n opacity: 0;\n transition: opacity var(--toggle-transition);\n}\n\n.neo-track-highlight {\n position: absolute;\n inset: 1px;\n border-radius: calc(var(--toggle-height) / 2);\n background: linear-gradient(90deg, transparent, rgba(54, 249, 199, 0));\n opacity: 0;\n transition: all var(--toggle-transition);\n}\n\n/* Spectrum analyzer */\n.neo-spectrum-analyzer {\n position: absolute;\n bottom: 6px;\n right: 10px;\n height: 10px;\n display: flex;\n align-items: flex-end;\n gap: 2px;\n opacity: 0;\n transition: opacity var(--toggle-transition);\n}\n\n.neo-spectrum-bar {\n width: 2px;\n height: 3px;\n background-color: var(--toggle-on-color);\n opacity: 0.8;\n}\n\n/* Thumb styles */\n.neo-thumb {\n position: absolute;\n top: 4px;\n left: 4px;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n transform-style: preserve-3d;\n transition: transform var(--toggle-transition);\n z-index: 1;\n}\n\n.neo-thumb-ring {\n position: absolute;\n inset: 0;\n border-radius: 50%;\n border: 1px solid rgba(255, 255, 255, 0.1);\n background: var(--toggle-off-color);\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\n transition: all var(--toggle-transition);\n}\n\n.neo-thumb-core {\n position: absolute;\n inset: 5px;\n border-radius: 50%;\n background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);\n transition: all var(--toggle-transition);\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.neo-thumb-icon {\n position: relative;\n width: 10px;\n height: 10px;\n transition: all var(--toggle-transition);\n}\n\n.neo-thumb-wave {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 10px;\n height: 2px;\n background: var(--toggle-off-color);\n transform: translate(-50%, -50%);\n transition: all var(--toggle-transition);\n}\n\n.neo-thumb-pulse {\n position: absolute;\n inset: 0;\n border-radius: 50%;\n border: 1px solid var(--toggle-off-color);\n transform: scale(0);\n opacity: 0;\n transition: all var(--toggle-transition);\n}\n\n/* Gesture area */\n.neo-gesture-area {\n position: absolute;\n inset: -10px;\n z-index: 0;\n}\n\n/* Interaction feedback */\n.neo-interaction-feedback {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 0;\n}\n\n.neo-ripple {\n position: absolute;\n top: 50%;\n left: 30%;\n width: 0;\n height: 0;\n border-radius: 50%;\n background: radial-gradient(\n circle,\n var(--toggle-on-color) 0%,\n transparent 70%\n );\n transform: translate(-50%, -50%);\n opacity: 0;\n transition: all 0.4s ease-out;\n}\n\n.neo-progress-arc {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 80px;\n height: 80px;\n border-radius: 50%;\n border: 2px solid transparent;\n border-top-color: var(--toggle-on-color);\n transform: translate(-50%, -50%) scale(0) rotate(0deg);\n opacity: 0;\n transition:\n opacity 0.3s ease,\n transform 0.5s ease;\n}\n\n/* Status indicator */\n.neo-status {\n position: absolute;\n bottom: -20px;\n left: 0;\n width: 100%;\n display: flex;\n justify-content: center;\n}\n\n.neo-status-indicator {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.neo-status-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: var(--toggle-off-color);\n transition: all var(--toggle-transition);\n}\n\n.neo-status-text {\n font-size: 9px;\n font-weight: 600;\n color: var(--toggle-off-color);\n letter-spacing: 1px;\n transition: all var(--toggle-transition);\n}\n\n/* Value display */\n.neo-value-display {\n position: absolute;\n top: -22px;\n right: 0;\n font-size: 12px;\n font-weight: 500;\n color: var(--toggle-off-color);\n opacity: 0;\n transform: translateY(5px);\n transition: all var(--toggle-transition);\n}\n\n.neo-value-text {\n transition: all var(--toggle-transition);\n}\n\n/* Active states */\n\n/* ON state */\n.neo-toggle-input:checked + .neo-toggle .neo-thumb {\n transform: translateX(calc(var(--toggle-width) - 38px));\n}\n\n.neo-toggle-input:checked + .neo-toggle .neo-thumb-ring {\n background-color: var(--toggle-on-color);\n border-color: rgba(54, 249, 199, 0.3);\n box-shadow: 0 0 15px rgba(54, 249, 199, 0.5);\n}\n\n.neo-toggle-input:checked + .neo-toggle .neo-thumb-wave {\n height: 8px;\n width: 8px;\n border-radius: 50%;\n background: transparent;\n border: 1px solid #fff;\n}\n\n.neo-toggle-input:checked + .neo-toggle .neo-thumb-pulse {\n transform: scale(1.2);\n opacity: 0.3;\n animation: neo-pulse 1.5s infinite;\n}\n\n.neo-toggle-input:checked + .neo-toggle .neo-track-highlight {\n background: linear-gradient(90deg, transparent, rgba(54, 249, 199, 0.2));\n opacity: 1;\n}\n\n.neo-toggle-input:checked + .neo-toggle .neo-grid-layer {\n opacity: 1;\n}\n\n.neo-toggle-input:checked + .neo-toggle .neo-spectrum-analyzer {\n opacity: 1;\n}\n\n.neo-toggle-input:checked + .neo-toggle .neo-spectrum-bar:nth-child(1) {\n animation: neo-spectrum 0.9s infinite;\n}\n\n.neo-toggle-input:checked + .neo-toggle .neo-spectrum-bar:nth-child(2) {\n animation: neo-spectrum 0.8s 0.1s infinite;\n}\n\n.neo-toggle-input:checked + .neo-toggle .neo-spectrum-bar:nth-child(3) {\n animation: neo-spectrum 1.1s 0.2s infinite;\n}\n\n.neo-toggle-input:checked + .neo-toggle .neo-spectrum-bar:nth-child(4) {\n animation: neo-spectrum 0.7s 0.1s infinite;\n}\n\n.neo-toggle-input:checked + .neo-toggle .neo-spectrum-bar:nth-child(5) {\n animation: neo-spectrum 0.9s 0.15s infinite;\n}\n\n.neo-toggle-input:checked + .neo-toggle .neo-status-dot {\n background-color: var(--toggle-on-color);\n box-shadow: 0 0 8px var(--toggle-on-color);\n}\n\n.neo-toggle-input:checked + .neo-toggle .neo-status-text {\n color: var(--toggle-on-color);\n content: \"ACTIVE\";\n}\n\n.neo-toggle-input:checked + .neo-toggle + .neo-value-display {\n opacity: 1;\n transform: translateY(0);\n}\n\n.neo-toggle-input:checked + .neo-toggle + .neo-value-display .neo-value-text {\n color: var(--toggle-on-color);\n}\n\n/* Hover effects */\n.neo-toggle:hover .neo-thumb-ring {\n transform: scale(1.05);\n}\n\n.neo-toggle-input:not(:checked) + .neo-toggle:hover .neo-thumb-wave::before,\n.neo-toggle-input:not(:checked) + .neo-toggle:hover .neo-thumb-wave::after {\n opacity: 1;\n}\n\n/* Drag gesture handling */\n.neo-toggle.neo-dragging .neo-track {\n transform: translateZ(-1px) scale(1.02);\n}\n\n.neo-toggle.neo-dragging .neo-thumb {\n transition: none;\n}\n\n/* Animations */\n@keyframes neo-pulse {\n 0% {\n transform: scale(1);\n opacity: 0.5;\n }\n 50% {\n transform: scale(1.5);\n opacity: 0.2;\n }\n 100% {\n transform: scale(1);\n opacity: 0.5;\n }\n}\n\n@keyframes neo-spectrum {\n 0% {\n height: 3px;\n }\n 50% {\n height: 8px;\n }\n 100% {\n height: 3px;\n }\n}\n\n/* Custom script to enable advance features */\n.neo-toggle.neo-activated .neo-ripple {\n width: 100px;\n height: 100px;\n opacity: 0.5;\n transition: all 0.6s ease-out;\n}\n\n.neo-toggle.neo-progress .neo-progress-arc {\n opacity: 0.8;\n transform: translate(-50%, -50%) scale(1) rotate(270deg);\n transition:\n opacity 0.3s ease,\n transform 1s ease;\n}\n\n/* Status text change */\n.neo-toggle-input:checked + .neo-toggle .neo-status-text::before {\n content: \"ACTIVE\";\n}\n\n.neo-toggle-input:not(:checked) + .neo-toggle .neo-status-text::before {\n content: \"STANDBY\";\n}\n"}

tall-starfish-3

👁 实时预览

📝 源代码