Material diseño ondulación efecto de clic con puro CSS
| Autor: | mladenplavsic |
|---|---|
| Views Total: | 5,762 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 23, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
Hace uso de transiciones CSS y posición : absoluta para crear efectos ondulantes sutiles en cualquier elemento clicable como se ve en la especificación de material Design.
See also:
- biblioteca de animación ondulante multiplataforma â & #128; & #147; Ripple. js
- efectos ondulados de material Design en Vanilla JavaScript â & #128; & #147; rippleJS
- diseño de material haga clic en efecto dominó en Vanilla JavaScript â & #128; & #147; toque material
- efecto de clic rizado de Android L con JavaScript y CSS3
- efectos ondulante de Google material Design con Wave. js
- botón de material de Google efectos ondulación al hacer clic â & #128; & #147; RippleButtons. js
Funcionamiento
Enlace a la hoja de estilos requerida:
<link href="ripple.css" rel="stylesheet">
Agregue la clase CSS ' Ripple ' al elemento HTML y done.
<button type="button" class="ripple" >Primary</button>
Reemplace los estilos predeterminados en LESS:
.ripple {
position: relative;
overflow: hidden;
&:after {
content: "";
background: rgba(255,255,255,0.3);
display: block;
position: absolute;
border-radius: 50%;
padding-top: 240%;
padding-left: 240%;
margin-top: -120%;
margin-left: -120%;
opacity: 0;
transition: all 1s;
}
&:active:after {
padding-top: 0;
padding-left: 0;
margin-top: 0;
margin-left: 0;
opacity: 1;
transition: 0s;
}
}
