WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Interruptor de Rodillo
3060
coders
Abrir en el editor
Publica tu código
Recomendado
29 August 2025
Administrador de tareas HTML: agregar, eliminar y completar tareas
18 November 2025
Metehan
7 September 2024
Universo geocéntrico
HTML
Copy
Rolling Togle (CSS ONLY)
Power
CSS
Copy
* { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --bg: hsl(var(--hue),90%,90%); --fg: hsl(var(--hue),90%,10%); --trans-dur: 0.3s; --trans-timing: cubic-bezier(0.65,0,0.35,1); font-size: calc(40px + (80 - 40) * (100vw - 320px) / (2560 - 320)); } body, input { font: 1em/1.5 sans-serif; } body { background-color: #234056; color: var(--fg); display: grid; place-items: center; height: 100vh; transition: background-color var(--trans-dur), color var(--trans-dur); } .switch, .switch__input { -webkit-tap-highlight-color: transparent; } .switch { position: relative; width: 3em; height: 1.5em; } .switch__check { display: block; transform: translateX(0) rotate(0); transition: transform var(--trans-dur) var(--trans-timing); z-index: 1; } .switch__check-line { transform: translate(0,0); transition: stroke var(--trans-dur) var(--trans-timing), stroke-dashoffset var(--trans-dur) var(--trans-timing), transform var(--trans-dur) var(--trans-timing); } .switch__input { background-color: hsla(var(--hue),90%,50%,0); border-radius: 1.5em; box-shadow: 0 0 0 0.0625em hsl(var(--hue),10%,50%) inset, 0 0.25em 1em hsla(var(--hue),90%,10%,0); cursor: pointer; display: block; outline: transparent; width: 100%; height: 100%; transition: background-color var(--trans-dur) var(--trans-timing), box-shadow var(--trans-dur) var(--trans-timing); -webkit-appearance: none; appearance: none; } .switch__input:before, .switch__input:after { content: ""; display: block; } .switch__input:before { background-color: hsl(0,0%,100%); border-radius: 50%; box-shadow: 0 0.125em 0.25em hsla(var(--hue),90%,10%,0); transition: box-shadow var(--trans-dur) var(--trans-timing), transform var(--trans-dur) var(--trans-timing); } .switch__input:after { border-radius: 0.75em; box-shadow: 0 0 0 0.125em hsla(var(--hue),90%,70%,0); width: 100%; height: 100%; transition: box-shadow 0.15s linear; } .switch__input:focus-visible:after { box-shadow: 0 0 0 0.125em hsla(var(--hue),90%,70%,1); } .switch__check, .switch__input:before { position: absolute; top: 0.25em; left: 0.25em; width: 1em; height: 1em; } .switch__input:checked { background-color: hsla(var(--hue),90%,50%,1); box-shadow: 0 0 0 0.0625em hsl(var(--hue),90%,50%) inset, 0 0.25em 1em hsla(var(--hue),90%,10%,0.5); } .switch__input:checked:before { box-shadow: 0 0.125em 0.25em hsla(var(--hue),90%,10%,0.5); transform: translateX(1.5em); } .switch__input:checked + .switch__check { animation: switch-check var(--trans-dur) var(--trans-timing); transform: translateX(1.5em) rotate(-225deg); } .switch__input:checked + .switch__check .switch__check-line { stroke: hsl(var(--hue),90%,50%); stroke-dashoffset: 0; transform: translate(-1px,-1px); transition-delay: 0s, calc(var(--trans-dur) / 2), 0s; } .switch__sr { overflow: hidden; position: absolute; width: 1px; height: 1px; } @media (prefers-color-scheme: dark) { :root { --bg: hsl(var(--hue),90%,10%); --fg: hsl(var(--hue),90%,90%); } } /* Animations */ @keyframes switch-check { from { transform: translateX(0) rotate(0); } to { transform: translateX(1.5em) rotate(135deg); } }
JS
Copy
/* NOT JS (CSS ONLY) */