直接用scale做波纹“假”是因为只放大元素而无扩散衰减，真实水波需半径增长+边框变细变淡；应结合transform、border-width与opacity联动，并用伪元素或动态dom实现独立动画生命周期。
为什么直接用 scale 做波纹会“假”？
因为真实水波是向外扩散+中心变薄，而纯 scale 只放大元素本身，边缘硬、无衰减、不透明度不变。常见错误是只对一个 div 做 transform: scale(0) → scale(2)，结果看起来像气泡炸开，不是涟漪。
真正可用的波纹需要两个关键特征：半径增长（视觉上靠 scale 模拟）+ 边框变细变淡（靠 border-width 和 opacity 联动）。否则动画一结束就突兀消失，没有“消散感”。
实操建议：
- 用伪元素
::after承载波纹，避免污染主结构 - 初始状态设为
scale(0.1)+border-width: 4px+opacity: 0.8，而非scale(0)—— 否则 CSS 动画起始帧可能被浏览器跳过渲染 - 动画时长控制在
1.2s–1.6s，太快像点击反馈，太慢失去“滴落”的瞬时感
如何用 border-width 配合 scale 模拟扩散衰减？
border-width 本身不能直接动画（除非是 solid 类型且浏览器支持），但配合 transform-origin: center 和等比缩放，能让边框视觉上“变细”。原理是：固定像素边框在放大时，单位面积内边框占比下降，再叠加 opacity 递减，就能骗过眼睛。
关键参数组合示例：
ripple::after {
content: '';
position: absolute;
border: 4px solid rgba(255, 255, 255, 0.7);
border-radius: 50%;
transform: scale(0.1);
transform-origin: center;
animation: ripple 1.4s ease-out forwards;
}
<p>@keyframes ripple {
0% {
transform: scale(0.1);
opacity: 0.8;
border-width: 4px;
}
100% {
transform: scale(3);
opacity: 0;
border-width: 0px; /<em> 必须写，否则部分 Safari 不触发重绘 </em>/
}
}</p>
注意：border-width: 0px 在终点必须显式声明，否则某些旧版 Chrome 会卡住边框不收缩；ease-out 比 linear 更符合水波减速扩散的物理直觉。
多个雨滴同时触发时，为什么波纹会“打架”？
问题现象：快速连续点击，后一个波纹覆盖前一个，或所有波纹同步缩放、失去层次感。根本原因是共用了同一个动画名和相同的 animation-duration，导致浏览器批量重排时复用同一时间轴。
解决办法不是加 animation-delay（那只是错开起点），而是让每个波纹实例拥有独立动画生命周期：
- 动态插入 DOM 元素（如每次点击创建新
span），而非复用伪元素 - 用 JS 设置唯一
animation-name或直接用element.animate()API 控制关键帧 - 更轻量的做法：给每个波纹加随机
animation-duration偏差（±0.15s），用Math.random()注入内联样式
例如 JS 中生成样式：
const ripple = document.createElement('span');
ripple.style.animationDuration = (1.3 + Math.random() * 0.3) + 's';
ripple.className = 'ripple';
移动端点击区域小，怎么让波纹始终以点击点为中心？
默认伪元素居中定位，只能响应元素中心，但雨滴是随机落点。必须用 JS 拿到 clientX/clientY，再通过 getBoundingClientRect() 转成相对容器的偏移。
核心计算逻辑：
container.addEventListener('click', e => {
const rect = container.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
<p>const ripple = document.createElement('span');
ripple.style.left = x + 'px';
ripple.style.top = y + 'px';
ripple.classList.add('ripple');
container.appendChild(ripple);</p><p>// 动画结束后自动移除
setTimeout(() => ripple.remove(), 1500);
});</p>
容易忽略的坑：left/top 是相对于 container 的，所以容器必须设 position: relative；另外，别忘了给 ripple 加 position: absolute 和 pointer-events: none，否则会拦截后续点击。
复杂点在于：如果容器有滚动、缩放或 CSS transform，getBoundingClientRect() 返回值需手动校正。简单项目里，优先用视口坐标 + transform: translate() 替代 left/top，更稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
