Google material Design estilo de la casilla de verificación efecto de transición con CSS3

Vista prévia

Descripción

En este artículo vamos a crear casillas de verificación animadas con efectos de transición sofisticados introducidos en < a href = "https://www.google.com/design/spec/components/switches.html # switches-checkbox" target = "_ blank" rel = "noopener" > material de Google Design , mediante transiciones y transformaciones CSS3.

Funcionamiento

Inserte una casilla de verificación HTML estándar en el documento.

<input type="checkbox" class="checkbox" checked>
<input type="checkbox" class="checkbox">

El CSS al estilo & animado las casillas de verificación.

.checkbox {

position: relative;

top: -0.375rem;

margin: 0 1rem 0 0;

cursor: pointer;
}

.checkbox:before {

-webkit-transition: all 0.3s ease-in-out;

-moz-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

content: "";

position: absolute;

left: 0;

z-index: 1;

width: 1rem;

height: 1rem;

border: 2px solid #f2f2f2;
}

.checkbox:checked:before {

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);
 height: .5rem;

border-color: #009688;

border-top-style: none;

border-right-style: none;
}

.checkbox:after {

content: "";

position: absolute;

top: -0.125rem;

left: 0;

width: 1.1rem;

height: 1.1rem;

background: #fff;

cursor: pointer;
}