Recientemente vi un buen efecto de clic en el botón. Al hacer clic, produjo un efecto de onda de agua y ondas. Fue bastante divertido, así que simplemente lo implementé (sin considerar el problema de compatibilidad de los navegadores de versión inferior)
Echemos un vistazo al efecto primero, como se muestra en la figura a continuación (la grabación del software GIF es un poco malo, parece que es Crazi ...)
Este efecto puede ser implementado por Canves anidados dentro de elementos o por CSS3.
Implementación de Canves
Una copia del código implementado por Canves se elige en línea, elimina ligeramente algunos estilos de definición duplicados y dio comentarios de JS. El código es el siguiente
código HTML
<a data-color = "#2f5398"> ¡Presioname! </a>
código CSS
* {box-singing: border-box; outline: none;} body {font-familia: 'abre sans'; font-size: 100%; font-weight: 300; line-height: 1.5em; text-align: centro;}. btn {border: none; visual 150px; altura: 40px; text-align: Center; Line-Height: 40px; border-radio: 5px;}. Btn.color-1 {en segundo plano: #426fc5;}. Btn-border.color-1 {background-color: transparente; borde: 2px sólido #426fc5; color: #426fc5;}. {posición: relativa;}. lienzo de diseño de material {opacidad: 0.25; posición: absoluto; top: 0; izquierda: 0;}. contenedor {align-content: center; align-items: flex-start; display: flex; flex-diRection: fila; flex-wrap: wrap; justify-content: center; margin: 0 auto; mAx-width: 46rem;};}código JS
var canvas = {}, centerx = 0, centery = 0, color = '', contenedores = document.getElementsByClassName ('Material-Design') context = {}, element = {}, Radius = 0, // Generar requestAnimation Based en la devolución de llamada SoldAnimeMframe = function () {Window.ReRequestanimation || Window.orequestanimationFrame || {Canvas = document.createElement ('Canvas'); Canvas.adDeventListener ('Click', Press, False); Containers [i] .AppendChild (Canvas); Canvas.Style.Width = '100%'; Canvas.Style.height = '100%'; Canvas.Width = Canvas.OffSetWidTh; Canvas.OffSetheight;}}, // Haga clic y obtenga los datos requeridos, como coordenadas de clic, tamaño de elemento, color press = function (event) {color = event.toelement.parentelement.dataset.color; element = event.toelement; context = element.getContext ('2d'); radius = 0; centerx = event.offsetx; Centery; event.offsety; context.clearrect (0, 0, element.width, element.height); dibujo ();}, // dibujar el círculo y ejecutar la animación dibujo = function () {context.beGinPath (); context.arc (centerX, Centery, Radius, 0, 2 * math.pi, falso); context.fillStyle; con radio += 2 juzgando que el radio es más pequeño que el ancho del elemento, dibuje constantemente el círculo con radio += 2 if (radio <element.width) {requestAnimframe (dibujo);}}; init ();Implementación de CSS3
El siguiente es el código que es puramente hecho a mano ... Creo que es más conveniente implementar CSS3, tal vez estoy acostumbrado a escribir CSS ...
código HTML
<a> ¡Presioname! </a>
código CSS
.Waves {posición: relativo; cursor: puntero; pantalla: bloqueo en línea; desbordamiento: oculto; text-align: Center; -webkit-tap-highlight-color: transparent; z-index: 1;}. waves.waves-animation {posición: absoluto; fronter-radius: 50%; ancho: 25px; altura: 25px; opacidad: 0; antecedentes: rgba (255,255,255,0.3); transición: todo 0.7s facilates; transmise-out; -webkit-transform; -webkit-transform: escala (0); transformar: escala (0); Pointer-events: Ninguno} .ts-btn {ancho: 200px; altura: 56px; line-height: 56px; fondo: #f57035; color: #fff; border-radius: 5px;}código JS
document.adDeventListener ('DomContentLoaded', function () {var duración = 750; // style string Patchwork var forStyle = function (posicion) {var cssstr = ''; for (var key en position) {if (posicion.HasownProperty (key)) cssSstr+= key+''+position [key]+';';}; Haga clic en el mouse Position var forrect = function (target) {var posición = {top: 0, izquierda: 0}, ele = document.documentElement; 'Undefined'! = typeof Target.getBoundingClientrect && (posicion = target.getBoundingClientRect (); return {top: position.top + window.pageYoffset - ele.clienttOp, izquierda de izquierda Window.PagexOffset - ELE.CLIENTLEFT}} var show = function (event) {var pdiv = event.target, cdiv = document.createElement ('div'); pdiv.appendChild (cdiv); var rectobj = forrect (pdiv), _ altura = event.pagey - rectobj.top, _left = event.page.page. rectObj.left,_scale = 'scale(' + pDiv.clientWidth / 100 * 10 + ')';var position = {top: _height+'px',left: _left+'px'};cDiv.className = cDiv.className + " waves-animation",cDiv.setAttribute("style", ForStyle (Position)), Position ["-WebKit-Transform"] = _Scale, Position ["-Moz-Transform"] = _Scale, Position ["-Moz-Transform"] = _Scale, Position ["-MS-Transform"] = _Scale, Position ["-O-Transform"] = _Scale, position.transform = _Scale, Position "1", posición ["-WebKit-Transition-Duration"] = Duración + "MS", Position ["-Moz-Transition-Duration"] = Duración + "MS", Position ["-O-Transition-Duration"] = Duración + "MS", Position ["-WebKit-Transition-Timing-Timing-Función"] = Duración + "MS", Position ["-Webkit-Transition-Timing-Timing-Timing-Timing-Función"] "Cúbico-Bezier (0.250, 0.460, 0.450, 0.940)", posición ["-MOZ-Transition-Timing-Function"] = "Cúbico-Bezier (0.250, 0.460, 0.450, 0.940)", posición ["-O-Transition-Timing-Function"] = "Cubicier (0.250, 0.460, 0.450, 0.450, 0.450, 0.450, 0.450, 0.940) ", Posición [" Transition-Timing-Function "] =" Cubic-Bezier (0.250, 0.460, 0.450, 0.940) ", Cdiv.SetAttribute (" Style ", ForStyle (Position)); var FinishStyle = {Opacidad: 0", Webkit-Transition Duración ": Duración +" MS ", // Transición Tiempo" + "ms","-o-transition-duration": duration + "ms","-webkit-transform": duration + "ms","-webkit-transform": _scale,"-moz-transform": _scale,"-ms-transform": _scale,"-o-transform": _scale,"-o-transform": _scale,"-o-transform": _Scale, "-escala,"-O-Transform ": _Scale,"-Escala, "-Top: _Height +" PX ", Izquierda: _left +" Px ",}; setTimeout (function () {cdiv.setattribute (" estilo ", ForStyle (finkStyle)); setTimeOut (function () {pdiv.removechild (cdiv);}, duración);}, 100)} document.querySelector ('. Waves'). AddEventListener ('Click', function (e) {show (e);} ,! 1);},! 1);Ok, eso es todo, por cierto, feliz Festival de Medio Otoño ~