伪元素波纹不居中是因为::after默认相对父容器左上角定位，需父元素设position: relative，::after设position: absolute、top: 50%、left: 50%、transform: translate(-50%, -50%)及content: “”。
伪元素波纹动效为什么总不居中？
因为 ::after 默认是相对父容器左上角定位的，没设 transform: translate(-50%, -50%) 就永远偏右下。而且必须配合 position: relative 在父元素上，否则 absolute 会往上层最近的定位祖先找——经常一点击就飞出屏幕。
- 父元素一定要加
position: relative -
::after必须设position: absolute+top: 50%+left: 50%+transform: translate(-50%, -50%) - 别忘了
content: ""，否则伪元素不渲染 - 如果父元素有
border-radius，波纹也要同步设，不然圆角按钮里波纹是方的
animation 怎么让颜色从中心扩散又渐隐？
靠 @keyframes 控制两个变量：scale（撑开）和 opacity（淡出）。不能只靠 background-color 动画——它没法模拟“扩散”感；也不能用 width/height，响应式下容易失准。用 transform: scale() 最稳，且 GPU 加速。
- 起始帧：
scale(0)+opacity: 0.3 - 结束帧：
scale(4)+opacity: 0（数值看容器大小，一般 3–6 之间） - 动画时长建议
300ms～450ms，太短像闪，太长像卡 - 务必加
animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94)，原生ease-out太生硬
:active 里直接写 animation 行不行？
不行。:active 是瞬态伪类，手指一抬就失效，而波纹需要持续播放完动画。必须用 JavaScript 监听 click 或 mousedown，动态添加一个类（比如 ripple），再靠这个类触发 animation。
- 用
mousedown而不是click，避免移动端 300ms 延迟导致波纹滞后 - 每次触发前先移除旧的
ripple类，防止连续点产生多个波纹叠加 - 记得在
transitionend或animationend里清理类名，不然 dom 上残留一堆无用 class - 示例关键句：
el.classList.add("ripple"); setTimeout(() => el.classList.remove("ripple"), 450);
深色模式下波纹发灰看不清？
因为波纹色写死成 #000 或 rgba(0,0,0,0.1) 了。实际该用 color-scheme 感知 + hsla() 动态调明度，或者更简单：用 currentColor 作为波纹基础色，再叠一层透明度。
立即学习“前端免费学习笔记（深入）”；
- 把伪元素
background-color改成currentColor，父元素文字色会自动继承（深色模式下通常更亮） - 如果父元素文字色太淡（比如浅灰），就用
Filter: brightness(1.5)微调，比硬写两套色值靠谱 - 避免用
prefers-color-scheme媒体查询重写整个动画——维护成本高，且无法响应系统中途切换
事情说清了就结束。最常漏的是 position: relative 和 transform: translate(-50%, -50%) 配合，以及用 mousedown 触发动画——这两处一错，波纹就彻底不跟手。