<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <title>html5+ js +css3 点击后水波纹扩散效果 兼容移动端</title> <style> body {margin:0;padding:0;} .center{text-align:center} .btn {position:relative;width:13em;height:3em;margin:2em;border:none;outline:none;letter-spacing:.2em;font-weight:bold;background:#999;cursor:pointer;overflow:hidden;user-select:none;border-radius:2px;color:#fff;} button:nth-child(2) {background:#4285f4;} button:nth-child(3) {background:#00bad2;} button:nth-child(4) {background:#ff8a80;} button:nth-child(5) {background:#ffae00;} button:nth-child(6) {background:#aec156;} button:nth-child(7) {background:#a060a8;} button:nth-child(8) {background:#a78660;} button:nth-child(9) {background:#5da065;} button:nth-child(10) {background:#5e6b9a;} button:nth-child(11) {background:#9a5e5e;} button:nth-child(12) {background:#666;} .ripple {position:absolute;background:rgba(0,0,0,.15);border-radius:100%;transform:scale(0);pointer-events:none;} .ripple.show {animation:ripple .75s ease-out;} @keyframes ripple {to {transform:scale(2);opacity:0;}} </style> </head> <body> <h1 class="center">html5 +css3 点击后水波纹扩散效果 兼容移动端</h1> <div class="main center"> <button class="btn">BUTTON</button> <button class="btn">BUTTON</button> <button class="btn">BUTTON</button> <button class="btn">BUTTON</button> <button class="btn">BUTTON</button> <button class="btn">BUTTON</button> <button class="btn">BUTTON</button> <button class="btn">BUTTON</button> <button class="btn">BUTTON</button> <button class="btn">BUTTON</button> <button class="btn">BUTTON</button> <button class="btn">BUTTON</button> </div> <script> var addRippleEffect = function (e) { var target = e.target; if (target.className.toLowerCase() !== 'btn') return false; var rect = target.getBoundingClientRect(); var ripple = target.querySelector('.ripple'); if (!ripple) { ripple = document.createElement('span'); ripple.className = 'ripple' rippleripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px' target.appendChild(ripple); } ripple.classList.remove('show'); var top = e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop; var left = e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft; ripple.style.top = top + 'px' ripple.style.left = left + 'px' ripple.classList.add('show'); return false; } document.addEventListener('click', addRippleEffect, false); </script> </body> </html>
（兼容移动端）预览地址：http://www.86y.org/demo/ripple/