Diseño de material animado casilla de verificación con CSS/CSS3
| Autor: | NazarKalytiuk |
|---|---|
| Views Total: | 3,287 |
| Sitio oficial: | Ir a la web |
| Actualizado: | March 18, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
Una solución CSS/CSS3 pura utilizada para crear casillas animadas siguiendo el < a href = "https://www.google.com/design/spec/components/selection-controls.html # selection-controls-checkbox" target = "_ blank" rel = "noopener" > Google material Design patrón .
Funcionamiento
Envuelva la casilla de verificación en un elemento Label:
<label> <input type="checkbox"> <span>material checkbox</span> </label>
El núcleo CSS/CSS3 reglas para estilo y animar la casilla de verificación en alternar.
label {
margin: 2rem;
position: relative;
display: flex;
align-items: center;
flex-wrap: wrap;
line-height: 1rem;
height: 1rem;
background: inherit;
}
input {
background: tra;
position: relative;
cursor: pointer;
width: 1.2rem;
height: 1.2rem;
margin-right: .4rem;
background: inherit;
}
input:before {
content: "";
position: absolute;
width: 1.2rem;
height: 1.2rem;
background: inherit;
cursor: pointer;
}
input:after {
content: "";
transition: .4s ease-in-out;
position: absolute;
z-index: 1;
width: 1rem;
height: 1rem;
border: .1rem solid rgba(200, 200, 200, .3);
}
input:checked:after {
transform: rotate(-45deg);
height: .5rem;
border-color: #43A047;
border-top-color: transparent;
border-right-color: transparent;
}
