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, por lo que simplemente lo implementé (sin considerar el problema de compatibilidad de los navegadores de baja versión)
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; esquema: ninguno;} cuerpo {Font-Family: 'Open Sans'; tamaño de fuente: 100%; Font-peso: 300; Línea de altura: 1.5em; Text-Align: Center;}. Btn {Border: Ninguno; Pantalla: bloque en línea; Color: blanco; desbordamiento: oculto; margen: 1rem; relleno: 0; Ancho: 150px; Altura: 40px; Text-Align: Center; Línea de altura: 40px; Border-Radius: 5px;}. Btn.Color-1 {Background-Color: #426FC5;}. Btn-Border.Color-1 {Background-Color: Transparent; Border: 2px Solid #426FC5; Color: #426FC5;}. Material-Diseño {posición: relativo;}. Material-Diseño Canvas {Opacidad: 0.25; Posición: Absoluto; arriba: 0; Izquierda: 0;}. Container {Aline-Content: Center; Alineación de ítems: arranque flexible; Pantalla: Flex; Dirección flexible: fila; Flex-Wrap: envoltura; Justify-Content: Center; margen: 0 auto; Máxido: 46Rem;}Código JS:
var canvas = {}, centerx = 0, centery = 0, color = '', contenedores = document.getElementsByClassName ('Material-Design') context = {}, element = {}, Radius = 0, // Generar requestAnimationFrame Animation basado en llamadas requestaniMframe = function () || window.eRequestanimationFrame || } (), // generar canves init = function () {contenedores = array.prototype.slice.call (contenedores); for (var i = 0; i <contenedor.length; i += 1) {Canvas = document.createElement ('Canvas'); Canvas.addeventListener ('hacer clic', presione, falso); contenedores [i] .appendChild (lienzo); Canvas.style.width = '100%'; Canvas.style.Height = '100%'; Canvas.Width = Canvas.OffSetWidth; Canvas.Height = 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; elemento = event.toelement; context = element.getContext ('2d'); radio = 0; CenterX = Event.OffSetX; Centery = Event.OffSety; context.ClearRect (0, 0, element.width, element.height); dibujar(); }, // 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 = color; context.fill (); radio += 2; // Dibuja el círculo 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 (dibujar); }}; 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: relativa; cursor: puntero; Pantalla: bloque en línea; desbordamiento: oculto; Text-Align: Center; -webkit-tap-highlight-color: transparent; z-índice: 1;}. ondas .waves-animation {posición: absoluta; Radio fronterizo: 50%; Ancho: 25px; Altura: 25px; Opacidad: 0; Antecedentes: RGBA (255,255,255,0.3); Transición: todos los 0.7 aliviados; transición-propiedad: transformación, opacidad, -webkit-transform; -Webkit-transform: escala (0); transformar: escala (0); Pointer-Events: Ninguno} .ts-btn {ancho: 200px; Altura: 56px; Línea de altura: 56px; Antecedentes: #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 var forrect = function (target) {var posición = {top: 0, izquierda: 0}, ele = document.documentElement; Window.PagexOffset - ELE.CLIENTLEFT}} var show = function (event) {var pdiv = event.target, cdiv = document.createElement ('div'); rectobj.left, _scale = 'escala (' + pdiv.clientwidth / 100 * 10 + ')'; position["-webkit-transform"] = _scale, position["-moz-transform"] = _scale, position["-ms-transform"] = _scale, position["-o-transform"] = _scale, position.transform = _scale, position.opacity = "1", position["-webkit-transition-duration"] = duration + "ms", posición ["-MOZ-Transition-Duration"] = Duración + "MS", Position ["-O-Transition-Duration"] = Duración + "MS", Position ["-O-Transition-Duration"] = Duración + "MS", Position ["Duración de transición"] = Duración + "MS", Position ["-WebKit-Transition-Timing-Función"]] = "Cubic-bezier ((0.250, 0. 0.940) ", posición ["-MOZ-Transition-Timing-Function "] =" Cúbico-Bezier (0.250, 0.460, 0.450, 0.940) ", posición ["-O-transición-transición-función "] =" cúbico-bezero (0.250, 0.460, 0.450, 0.940) ", posicion ["-"-función de transición-timbre"] "Cúbico-Bezier (0.250, 0.460, 0.450, 0.940)", CDiv.SetAttribute ("estilo", ForStyle (Position)); "MS", "Duración de transición": Duración + "MS", "-Webkit-Transform": _Scale, "-Moz-Transform": _Scale, "-MS-Transform": _Scale, "-o-Transform": _scale, top: _Height + "Px", izquierda: _left + "Px",}; CDIV.SetTribute ("Style", ForStyle (FinalStyle));Todos estos son los principios, y el principio es simple. Obtenga la ubicación de clic> Agregar estilo por cierto, feliz festival de outumnia a mediados
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.