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 da versão inferior)
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
* {Box-sizing: Border-box; esboço: nenhum;} corpo {font-family: 'aberta sem'; tamanho da fonte: 100%; peso da fonte: 300; altura da linha: 1.5em; text-align: center;}. 40px; Texto-alinhamento: centro; altura da linha: 40px; radio de borda: 5px;}. Btn.Color-1 {Background-Color: #426FC5;}. Btn-Border.color-1 {Background-Color: Transparent; Border: 2px Solid #426fc5; cor {Background-color: Border; Border: 2PX Solid #426fc5; cor {Background-color: Border; Border: 2px Solid #426fc5; Color-1 {Background: relativa;}.Código JS
var canvas = {},centerX = 0,centerY = 0,color = '',containers = document.getElementsByClassName('material-design')context = {},element = {},radius = 0,// Generate requestAnimationFrame based on callback requestAnimFrame = function () {return (window.requestAnimationFrame || window.mozRequestAnimationFrame || Window.oreQuestanimationFrame ||. {Canvas = document.createElement ('Canvas'); canvas.addeventListener ('clique', pressione, false); contêineres [i] .appendChild (canvas); canvas.style.width = '100%'; canvas.style.Height = '100%'; canvas.offsetHeight;}}, // Clique e obtenha os dados necessários, como coordenadas de cliques, tamanho do elemento, cor de cor pressionada = function (event) {color = event.toelement.parenteLement.dataset.color; element = event.toelement; context = elementContect ('2d'); radius = 0; event.offsety; context.clearRect (0, 0, element.width, element.Height); draw ();}, // desenhe o círculo e execute o draw de animação = function () {context.beginpath (); context.arc (Centerx, Centery, Radius, 0, 2 * math.pi, false); raio += 2 julgando que o raio é menor que a largura do elemento, desenhe constantemente o círculo com raio += 2 if (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: Block inline; estouro: Hidden; Text-Align: Centro; -Webkit-Tap-Highlight-Color: transparente; Z-Index: 1;}. Ondas. Ondas-Animação {Posição: Absoluto; Rádio de Fronteira: 50%; Largura: 25px; Altura: 25px; Opacity: 0; Antecedentes: RGBA (255,255,25,0.3); -webkit-transform;-webkit-transform:scale(0);transform:scale(0);pointer-events:none}.ts-btn{width: 200px;height: 56px;line-height: 56px;background: #f57035;color: #fff;border-radius: 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))}; Mouse Clique em Posição Var FORRECT = function (Target) {var POSITION = {TOP: 0, esquerda: 0}, ele = document.documentElement; 'Undefined'! window.pagexoffset - ele.clientleft}} var show = function (event) {var pdiv = event.target, cdiv = document.createElement ('div'); pdiv.appendchild (cdiv); vartobj = forlet (pdiv), _ altura = event.pagey -scr); Rectobj.left, _scale = 'Scale (' + pdiv.clientWidth / 100 * 10 + ')'; var position = {top: _Height + 'px', esquerda: _left + 'px'}; cdiv.classname = cdiv.classname "" Waves-animation "; forstyle (posição)), posição ["-webkit-transform"] = _scale, posicionar ["-moz-trransform"] = _cale, posicionar ["-moz-transform"] = _scale, posição ["-ms-transform"] = _cale, posição ["-o-transform"] = _cale "1", posição ["-webkit-transição-duração"] = duração + "ms", posição ["-moz-transição duração"] = duração + "ms", posição ["-o-transição duração"] = duração + "ms", posição ["-webkit-transição-timing-função"] = duração + "ms", ms ", ["-Position ["-Webkit-transição-função"] = duração + "ms", [" "Cúbico-Bezier (0,250, 0,460, 0,450, 0,940)", posição ["-MOZ-transição-timing-função"] = "cúbico-bEzier (0,250, 0,460, 0,450, 0,940)", posição ["-o-transição-função"] = "cubadaz-bez)", 0.940) ", posição [" transição-timing-function "] =" cúbico-bezier (0,250, 0,460, 0,450, 0,940) ", cdiv.setAttribute (" style ", forstyle (position); var finallstyle = {opacity: 0,"-webkit-renaturation " duração + "ms", "-o-transição-duração": duração + "ms", "-webkit-transform": duração + "ms", "-webkit-transform": _scale, "-moz-transform": _scale, "-ms-trans": _scale, "o-trransform": _scale, "-ms-trans": _scale "-o-trransform": _scale, "-ms-trans": _scale, "-o-trransform": _scale, "-ms-trans": _cale, "-o-trransform": _cale, " _scale, "-escala,"-o-transform ": _scale,"-escala "-top: _height +" px ", esquerda: _left +" px ",}; setTimeout (function () {cdiv.setattribute (" estilo ", forstyle (FinStyle)); setTimeout (function () {pdiv.RemoveChild (CDIV);}, duração);}, 100)} document.QuerySelector ('. Waves'). addEventListener ('clique', function (e) {show (e);},! 1);Ok, é tudo isso, a propósito, feliz festival no meio do outono ~