{"html":"\n \n \n \n \n \n \n \n\n","css":"/* --- CONFIGURATION GLOBALE DU SWITCH --- */\n.stealth-switch {\n --w: 80px; /* Largeur */\n --h: 40px; /* Hauteur */\n --handle-size: 34px; /* Taille du bouton rond */\n --p: 3px; /* Padding interne */\n --speed: 0.5s; /* Vitesse fluide */\n\n /* Couleurs \"Luxe\" */\n --on-color: #ffb700; /* Or Omega / Ambre */\n --off-metal: #2b2b2b; /* Gris Titane */\n --glow: rgba(255, 183, 0, 0.4);\n\n display: inline-block;\n position: relative;\n width: var(--w);\n height: var(--h);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n z-index: 1; /* S'assure qu'il est au dessus du reste */\n}\n\n/* Cache la checkbox système */\n.stealth-switch input {\n opacity: 0;\n width: 0;\n height: 0;\n position: absolute;\n}\n\n/* --- LE CORPS (TRACK) --- */\n.body {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(180deg, #111, #1a1a1a);\n border-radius: 50px;\n /* Ombres adaptatives : marchent sur fond blanc ET noir */\n box-shadow:\n 0 4px 10px rgba(0, 0, 0, 0.3),\n /* Ombre portée douce */ inset 0 2px 3px rgba(0, 0, 0, 0.8),\n /* Profondeur interne haute */ inset 0 -1px 1px rgba(255, 255, 255, 0.1); /* Petit reflet bas \"Apple\" */\n border: 1px solid rgba(255, 255, 255, 0.05); /* Bordure subtile pour fond noir */\n transition: all var(--speed) ease;\n overflow: hidden;\n}\n\n/* --- EFFET DE REFLET DE VERRE (SHIMMER) --- */\n/* C'est ce qui donne le style \"montre de luxe\" */\n.shimmer {\n position: absolute;\n top: 0;\n left: -100%;\n width: 50%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(255, 255, 255, 0.05),\n transparent\n );\n transform: skewX(-20deg);\n transition: left var(--speed) ease;\n}\n\n/* --- LE BOUTON (HANDLE) --- */\n.handle {\n position: absolute;\n top: var(--p);\n left: var(--p);\n width: var(--handle-size);\n height: var(--handle-size);\n background: conic-gradient(\n from 180deg,\n #444,\n #222,\n #555,\n #222,\n #444\n ); /* Métal brossé */\n border-radius: 50%;\n box-shadow:\n 0 2px 5px rgba(0, 0, 0, 0.5),\n inset 0 1px 1px rgba(255, 255, 255, 0.3);\n transition: transform var(--speed) cubic-bezier(0.34, 1.56, 0.64, 1); /* Effet ressort */\n z-index: 2;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n/* --- LA LENTILLE CENTRALE (LENS) --- */\n/* Le \"Cœur\" du switch style Batman */\n.lens {\n width: 8px;\n height: 8px;\n background-color: #000;\n border-radius: 50%;\n box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2);\n transition: all var(--speed) ease;\n}\n\n/* --- ÉTAT ACTIVÉ (CHECKED) --- */\n\n/* Mouvement */\n.stealth-switch input:checked ~ .handle {\n transform: translateX(calc(var(--w) - var(--handle-size) - (var(--p) * 2)));\n}\n\n/* Allumage du fond */\n.stealth-switch input:checked ~ .body {\n /* On garde le fond sombre mais on ajoute une lueur interne */\n box-shadow:\n 0 4px 10px rgba(0, 0, 0, 0.3),\n inset 0 2px 3px rgba(0, 0, 0, 0.8),\n inset 0 0 15px var(--glow); /* Lueur diffuse interne */\n border-color: rgba(255, 183, 0, 0.2);\n}\n\n/* Mouvement du reflet */\n.stealth-switch input:checked ~ .body .shimmer {\n left: 150%; /* Le reflet traverse le switch */\n transition: left 0.8s ease-in-out;\n}\n\n/* Allumage de la lentille */\n.stealth-switch input:checked ~ .handle .lens {\n background-color: var(--on-color);\n box-shadow:\n 0 0 10px var(--on-color),\n inset 0 1px 4px rgba(255, 255, 255, 0.5);\n width: 10px; /* Légère dilatation de la pupille */\n height: 10px;\n}\n\n/* Rotation subtile du métal au clic */\n.stealth-switch input:checked ~ .handle {\n background: conic-gradient(from 220deg, #444, #222, #555, #222, #444);\n}\n"}

loud-penguin-100

👁 实时预览

📝 源代码