Recentemente, vi um bom efeito de clique de botão. Ao clicar, produziu um efeito de onda de água e ondulações. Foi bastante divertido, então eu simplesmente o implementei (não considerando a questão da compatibilidade dos navegadores de baixa versão)
Vamos dar uma olhada no efeito primeiro, como mostrado na figura abaixo (a gravação do software GIF é um pouco ruim, parece que é Crazi ...)
Esse efeito pode ser implementado por CANVES aninhados dentro dos elementos ou pelo CSS3.
Implementação de Canves
Uma cópia do código implementada por CANVES é escolhida on -line, removida ligeiramente alguns estilos de definição duplicada e fez comentários em JS. O código é o seguinte
Código HTML: <a data-color = "#2f5398"> me pressione! </a>
Código CSS:
* {tamanho da caixa: caixa de fronteira; Esboço: Nenhum;} corpo {Font-Family: 'Open Sans'; tamanho de fonte: 100%; Peso da fonte: 300; altura da linha: 1.5em; Text-Align: Center;}. Btn {Border: Nenhum; Exibição: bloco embutido; Cor: Branco; estouro: oculto; margem: 1Rem; preenchimento: 0; Largura: 150px; Altura: 40px; Alinhamento de texto: centro; altura da linha: 40px; Radius de fronteira: 5px;}. borda: 2px Solid #426FC5; Cor: #426FC5;}. Material-Design {Posição: relativa;}. Canvas de design de material {Opacity: 0.25; Posição: Absoluto; topo: 0; Esquerda: 0;}. Container {Align-Content: Center; Align-itens: Flex-Start; exibição: flex; Direcção flexível: Linha; FLEX-WRAP: WRAP; Justify-Content: Center; margem: 0 automático; Max-lar: 46rem;}Código JS:
var Canvas = {}, Centerx = 0, Centery = 0, color = '', contêineres = document.getElementsByClassName ('material-design') context = {}, element = {}, raio = 0, // gene requestAnimationframe animação baseada no retorno de chamada para requestnfame = 0honMain (Window.Brath. ||. } (), // gerar canves init = function () {containers = array.prototype.slice.call (contêineres); for (var i = 0; i <containers.Length; i += 1) {Canvas = document.CreateElement ('Canvas'); canvas.addeventListener ('clique', pressione, false); contêineres [i] .appendChild (tela); canvas.style.width = '100%'; canvas.style.Height = '100%'; canvas.width = Canvas.OffsetWidth; canvas.Height = Canvas.OffSethEight; }}, // Clique e obtenha os dados necessários, como coordenadas de clique, tamanho do elemento, color Press = function (event) {color = event.toelement.parentelement.dataset.color; elemento = event.toElement; context = element.getContext ('2d'); raio = 0; Centerx = Event.OffSetX; Centery = event.offsety; context.clearrect (0, 0, element.width, element.Height); empate(); }, // desenhe o círculo e execute a animação draw = function () {context.beginpath (); Context.arc (Centerx, Centery, Radius, 0, 2 * Math.pi, False); context.fillstyle = cor; context.fill (); raio += 2; // Desenhe o círculo com raio += 2 julgando que o raio é menor que a largura do elemento, desenhe constantemente o círculo com raio += 2 se (raio <element.width) {requestanImframe (draw); }}; init ();Implementação de CSS3
Em seguida, é o código que é puramente feito à mão ... acho mais conveniente implementar o CSS3, talvez eu esteja acostumado a escrever CSS ...
Código HTML
<a> Pressione -me! </a>
Código CSS
.waves {posição: relativa; Cursor: Ponteiro; Exibição: bloco embutido; estouro: oculto; Alinhamento de texto: centro; -Webkit-Tap-Highlight-Color: transparente; Z-Index: 1;}. Ondas. Ondas-Animação {Posição: Absoluto; Radio de fronteira: 50%; Largura: 25px; Altura: 25px; opacidade: 0; Antecedentes: RGBA (255.255,255,0.3); Transição: todos os 0.7s facilitam; Property de transição: transform, opacidade, -webkit-transform; -Webkit-transform: escala (0); Transformar: escala (0); Pointer-Events: Nenhum} .ts-Btn {Width: 200px; Altura: 56px; altura da linha: 56px; Antecedentes: #F57035; Cor: #FFF; Radio de fronteira: 5px;}Código JS
document.addeventListener ('domcontentLoaded', function () {var duration = 750; // estilo string de retalhos var forstyle = function (position) {var cSSSTR = ''; para (var chave em posições) {if (position.HasownProperty (key))}; Posição de clique em mouse var forRect = function (Target) {var position = {top: 0, esquerda: 0}, ele = document.documentElement; window.pagexoffset - ele.clientleft}} var show = function (event) {var pdiv = event.target, cdiv = document.createElement ('div'); _scale = 'escala (' + pdiv.clientwidth / 100 * 10 + ')'; = _cale, posição ["-moz-trransform"] = _cale, posição ["-ms-transform"] = _scale, position ["-o-transform"] = _cale, position.Transform = _Scale, Position.Opacity = "1", Position "-Webkit-transtrionaturation"] = dura "" position["-o-transition-duration"] = duration + "ms", position["-o-transition-duration"] = duration + "ms", position["transition-duration"] = duration + "ms", position["-webkit-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)", position["-moz-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)", position["-o-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)", position["transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)", cDiv.setAttribute("style", forStyle(position)); var finishStyle = { opacity: 0, "-webkit-transition-duration": duration + "ms", // Transition time"-moz-transition-duration": duration + "ms", "-o-transition-duration": duration + "ms", "transition-duration": duração + "ms", "-webkit-transform": _scale, "-moz-transform": _scale, "-ms-transform": _scale, "-o-transform": _scale, top: _height + "px", esquerda: _left + "px",}; forstyle (Finishtyle));Todos esses são os princípios, e o princípio é simples. A propósito, obtenha o local de clique> Adicionar estilo, feliz festival no meio do outono ~
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.