径向波纹效果本质是遮罩层动画，依赖圆形伪元素的scale和opacity动画；radial-gradient仅静态填充背景，不参与动画；按钮需relative定位，伪元素用absolute+translate居中；JS动态计算点击坐标以实现真实落点波纹。
径向波纹效果的本质是遮罩层动画，不是渐变动画
很多人误以为 @keyframes 需要配合 radial-gradient 实现波纹，其实不然。真实可落地的波纹效果依赖的是一个「圆形 ::after 伪元素」从中心点放大并透明度渐隐——radial-gradient 在这里仅用于背景填充，不参与动画逻辑。用渐变做动画会触发重绘（paint），性能差，且无法精确控制起始半径和扩散节奏。
- 真正动起来的是伪元素的
transform: scale()和opacity -
radial-gradient只在伪元素上静态设置为纯色（如radial-gradient(circle, rgba(0,0,0,0.2) 0%, transparent 70%)），它本身不随帧变化 - 动画必须设为
forwards，否则波纹缩回后会闪一下
按钮必须用 relative 定位，伪元素才能精准锚定中心
如果按钮没设 position: relative，::after 默认按文档流渲染，top: 50%; left: 50% 会相对于最近的定位祖先计算，结果偏移不可控。波纹看起来“歪了”或“飞出按钮外”，基本都是这个原因。
- 给按钮加
position: relative是强制前提 - 伪元素需设
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0) - 初始
scale(0)比width/height: 0更可靠——避免 Safari 下 0 尺寸元素触发渲染 bug
动画关键帧里不要写 background，只控制 transform 和 opacity
把 background 放进 @keyframes 会导致每帧重绘渐变，Chrome DevTools 的 Rendering 面板里能看到频繁的 paint 事件。实测在中低端安卓机上容易掉帧。
- 正确做法：背景在伪元素默认样式里一次性写死，例如
background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%) -
@keyframes ripple里只包含transform: scale(4)和opacity: 0 - 动画时长建议 300–450ms，太短用户感知不到，太长交互迟滞
@keyframes ripple {
to {
transform: translate(-50%, -50%) scale(4);
opacity: 0;
}
}
JavaScript 触发时得动态计算点击坐标，否则波纹总在正中心
固定居中只能模拟“按下整个按钮”的感觉；真实点击波纹必须从鼠标/手指落点出发。CSS 本身做不到这点，必须靠 JS 获取 clientX/clientY 并设置伪元素的 left 和 top。
- 监听
click或touchstart，用getBoundingClientRect()算相对偏移 - 把计算出的
x、y塞进伪元素的style.left和style.top - 每次触发前先移除旧的伪元素（或重置
scale和opacity），避免多层叠加卡顿 - 移动端注意
touchstart要preventDefault()否则可能触发双击缩放
波纹看似简单，但坐标计算、图层合成、paint 触发时机这几个点一错，效果就断在真实设备上。尤其别信“纯 CSS 波纹”的 demo——它们大多省略了坐标动态适配，实际点哪都从中心炸开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
