Interruptor de Rodillo

3,946 0 coders Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

18 March 2023

Formulario de inicio de sesión moderno

24 April 2026

Minecraft

18 May 2026

FNF

HTML

CSS

* {

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);

}

Comments 0

…