效果如下
新建HTML文件，把下面的代码直接贴进来，浏览器打开看效果。在线运行
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>点击水波纹</title><style>.content {display: flex;justify-content: center;align-items: center;color: #fff;width: 200px;height: 50px;background: #409eff;cursor: pointer;}/* 水波纹样式-开始 */.ripple {position: relative;overflow: hidden;}.ripple-div {position: absolute;z-index: 10;background: hsla(0, 0%, 100%, 0.3);border-radius: 50%;opacity: 1;top: 0;left: 0;-ms-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);-webkit-transform: scale(0);transform: scale(0);pointer-events: none;}.ripple-div.rippling {/* -ms-animation: rippleAnima 0.6s linear;-moz-animation: rippleAnima 0.6s linear;-o-animation: rippleAnima 0.6s linear;-webkit-animation: rippleAnima 0.6s linear;animation: rippleAnima 0.6s linear; */}@-ms-keyframes rippleAnima {to {opacity: 0;-ms-transform: scale(3);-moz-transform: scale(3);-o-transform: scale(3);-webkit-transform: scale(3);transform: scale(3);}}@-moz-keyframes rippleAnima {to {opacity: 0;-ms-transform: scale(3);-moz-transform: scale(3);-o-transform: scale(3);-webkit-transform: scale(3);transform: scale(3);}}@-o-keyframes rippleAnima {to {opacity: 0;-ms-transform: scale(3);-moz-transform: scale(3);-o-transform: scale(3);-webkit-transform: scale(3);transform: scale(3);}}@-webkit-keyframes rippleAnima {to {opacity: 0;-ms-transform: scale(3);-moz-transform: scale(3);-o-transform: scale(3);-webkit-transform: scale(3);transform: scale(3);}}@keyframes rippleAnima {to {opacity: 0;-ms-transform: scale(3);-moz-transform: scale(3);-o-transform: scale(3);-webkit-transform: scale(3);transform: scale(3);}}/* 水波纹样式-结束 */</style></head><body><div class="content ripple">点击水波纹一</div><div class="content ripple" style="background: #67c23a">点击水波纹二</div></body><script>// 对要添加水波纹效果的元素添加ripple类let eles = document.getElementsByClassName("ripple");for (let index = 0; index < eles.length; index++) {const element = eles[index];// 添加点击事件element.addEventListener("click", (e) => {let createDiv = document.createElement("div");createDiv.className = "ripple-div rippling";let maxHW = Math.max(e.target.offsetWidth, e.target.offsetHeight);createDiv.style.width = `${maxHW}px`;createDiv.style.height = `${maxHW}px`;// 动态设置动画时间，容器越大，动画时间越长createDiv.style.animation = `rippleAnima ${maxHW / 200}s linear`;// 重新计算水波纹的中心位置createDiv.style.top = `${e.offsetY - maxHW / 2}px`;createDiv.style.left = `${e.offsetX - maxHW / 2}px`;// 追加到元素中element.appendChild(createDiv);setTimeout(() => {// 删除元素element.removeChild(createDiv);}, 600);});}</script></html>
