WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
2516
coders
Abrir no Editor
Publique Seu Código
Recomendado
28 March 2025
Alternador de animação de sprite CSS
HTML
Copy
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Rolling Togle (CSS ONLY)</title> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel="stylesheet" href="./style.css"> </head> <body> <label class="switch"> <input class="switch__input" type="checkbox" role="switch"> <svg class="switch__check" viewBox="0 0 16 16" width="16px" height="16px"> <polyline class="switch__check-line" fill="none" stroke="hsl(var(--hue),10%,50%)" stroke-dasharray="9 9" stroke-dashoffset="3.01" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" points="5,8 11,8 11,11" /> </svg> <span class="switch__sr">Power</span> </label> </body> </html>
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) */
