Recently I saw a good button click effect. When clicking, it produced a ripples effect. It was quite fun, so I simply implemented it (not considering the compatibility issue of lower version browsers)
Let’s take a look at the effect first, as shown in the figure below (the recording software is a bit bad, it looks like it’s crazi...)
This effect can be implemented by nested canves inside elements, or by css3.
Canves implementation
A copy of the code implemented by canves is picked online, slightly removed some duplicate definition styles and gave js comments. The code is as follows
html code
<a data-color="#2f5398">Press me!</a>
css code
* {box-sizing: border-box;outline: none;}body {font-family: 'Open Sans';font-size: 100%;font-weight: 300;line-height: 1.5em;text-align: center;}.btn {border: none;display: inline-block;color: white;overflow: hidden;margin: 1rem;padding: 0;width: 150px;height: 40px;text-align: center;line-height: 40px;border-radius: 5px;}.btn.color-1 {background-color: #426fc5;}.btn-border.color-1 {background-color: transparent;border: 2px solid #426fc5;color: #426fc5;}.material-design {position: relative;}.material-design canvas {opacity: 0.25;position: absolute;top: 0;left: 0;}.container {align-content: center;align-items: flex-start;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;margin: 0 auto;max-width: 46rem;}js code
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 || window.msRequestAnimationFrame || function (callback) {window.setTimeout(callback, 1000 / 60);});});} (),// Generate canvesinit = function () {containers = Array.prototype.slice.call(containers);for (var i = 0; i < containers.length; i += 1) {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.height = canvas.offsetHeight;}},// Click and get the required data, such as click coordinates, element size, 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);draw();},// Draw the circle and execute the animation draw = function () {context.beginPath();context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);context.fillStyle = color;context.fill();radius += 2;// Draw the circle with radius += 2 by judging that the radius is smaller than the width of the element, constantly draw the circle with radius += 2 if (radius < element.width) {requestAnimFrame(draw);}};init();CSS3 implementation
Next is the code that is purely hand-made... I think it is more convenient to implement css3, maybe I am used to writing css...
html code
<a>Press me!</a>
css code
.waves{position:relative;cursor:pointer;display:inline-block;overflow:hidden;text-align: center;-webkit-tap-highlight-color:transparent;z-index:1;}.waves.waves-animation{position:absolute;border-radius:50%;width:25px;height:25px;opacity:0;background:rgba(255,255,255,0.3);transition:all 0.7s ease-out;transition-property:transform, opacity, -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;}js code
document.addEventListener('DOMContentLoaded',function(){var duration = 750;// Style string patchwork var forStyle = function(position){var cssStr = '';for( var key in position){if(position.hasOwnProperty(key)) cssStr += key+':'+position[key]+';';};return cssStr;}// Get the mouse click position var forRect = function(target){var position = {top:0,left:0}, ele = document.documentElement;'undefined' != typeof target.getBoundingClientRect && (position = target.getBoundingClientRect());return {top: position.top + window.pageYOffset - ele.clientTop,left: position.left + window.pageXOffset - ele.clientLeft}}var show = function(event){var pDiv = event.target,cDiv = document.createElement('div');pDiv.appendChild(cDiv);var rectObj = forRect(pDiv),_height = event.pageY - rectObj.top,_left = event.pageX - 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.opacity = "1",position["-webkit-transition-duration"] = duration + "ms",position["-moz-transition-duration"] = duration + "ms",position["-o-transition-duration"] = duration + "ms",position["-webkit-transition-timing-function"] = 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","-webkit-transform": duration + "ms","-webkit-transform": _scale,"-moz-transform": _scale,"-ms-transform": _scale,"-o-transform": _scale,"-o-transform": _scale,"-o-transform": _scale,"-scale,"-o-transform": _scale,"-scale,"-top: _height + "px",left: _left + "px",};setTimeout(function(){cDiv.setAttribute("style", forStyle(finishStyle));setTimeout(function(){pDiv.removeChild(cDiv);},duration);},100)}document.querySelector('.waves').addEventListener('click',function(e){show(e);},!1);},!1);OK, that’s all, by the way, happy Mid-Autumn Festival~