Efecto ondulante minimalista al hacer clic y Tap-Ripple. js
| Autor: | mariusclaret |
|---|---|
| Views Total: | 1,473 |
| Sitio oficial: | Ir a la web |
| Actualizado: | October 18, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
Sin embargo, otra biblioteca de JavaScript que implementa el < a href = "https://wikicss.com/tag/ripple/" > material Ripple Effect en cualquier elemento que especifique.
Funcionamiento
Importe el script Ripple. js a la Página Web.
<script src="ripple.js"></script>
Sólo tiene que añadir la clase CSS ' Ripple ' a los elementos de destino y hecho.
<h2>Ripple on cards</h2> <div id="card" class="ripple"></div> <h2>Ripple on buttons</h2> <button id="button" class="ripple">Button</button> <h2>Ripple on fabs</h2> <div id="fab" class="ripple"> <svg viewBox="0 0 24 24"> <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" /> </svg> </div> <h2>Ripple on icons</h2> <div id="icon" class="ripple"> <svg viewBox="0 0 24 24"> <path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" /> </svg> </div>
