按钮点击时涟漪不居中是因为::after伪元素定位基准未对齐点击位置，需用JavaScript计算相对坐标并设置left/top减去半径，配合transform-origin:center、px单位、animationend清理及Safari兼容处理。

按钮点击时涟漪不居中

根本原因是 ::after 伪元素的定位基准没对齐点击位置，而是默认以按钮左上角为原点。浏览器不会自动把涟漪中心“锚定”到鼠标点，得手动算。

• 必须用 JavaScript 拿到 e.clientX 和 e.clientY，再减去按钮 getBoundingClientRect() 的 left/top，得到相对坐标
• ::after 要设 position: absolute，且父按钮必须是 position: relative
• 设置 left 和 top 时，要减去半径（width/2），否则涟漪圆心会偏右下
• 别用 % 或 vw 定位，必须用 px 动态赋值，否则响应式下错位

CSS关键帧里 transform 缩放失效

常见于直接写 transform: scale(0) → scale(1) 却没扩散效果——因为没设 transform-origin，缩放中心默认是元素左上角。

• 伪元素 ::after 必须显式加 transform-origin: center，否则涟漪从一角炸开
• 动画属性要写全：用 transform: scale(0) 而不是 scaleX(0) scaleY(0)，后者可能触发硬件加速异常
• 如果按钮有 border-radius，涟漪圆角需保持一致，否则边缘穿帮；建议伪元素也设相同 border-radius
• 慎用 will-change: transform，低端安卓 WebView 下可能导致闪屏或卡顿

多次快速点击导致涟漪堆叠或残留

本质是事件未节流 + 伪元素未及时清理。每个点击都新建一个 ::after 实例（实际是 JS 动态加 class 触发），旧动画没结束，新动画又覆盖上去。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 给按钮加防抖：记录上一次涟漪的 timeoutID，触发前先 clearTimeout
• 动画结束必须监听 animationend 事件，然后移除涟漪 class，不能只靠 CSS animation-fill-mode: forwards
• 避免用 opacity: 0 隐藏残留元素，要真正 remove() 或重置 display: none
• 移动端要考虑 touchstart 替代 click，否则有 300ms 延迟，连点更易堆叠

伪元素涟漪在 Safari 上不触发或闪烁

Safari 对动态插入的伪元素动画支持不稳定，尤其在 content: '' + animation 组合下，容易跳帧或首次不播。

立即学习“前端免费学习笔记（深入）”；

• 必须给伪元素加 pointer-events: none，否则可能拦截后续点击
• Safari 需要显式声明 animation-timing-function，不能只靠浏览器默认，推荐用 cubic-bezier(0.4, 0, 0.2, 1)
• 避免在伪元素上用 background: radial-gradient 模拟涟漪，Safari 渲染慢且易糊；老老实实用纯色 + opacity 渐变
• 真机调试时注意：iOS 15+ 开启了 prefers-reduced-motion 的用户，涟漪应被 CSS 媒体查询禁用，否则违反可访问性

事情说清了就结束。真正难的不是写出来，是让每个点击都精准、轻量、不抢焦点、不干扰语义，还兼容老 Safari —— 这些细节藏在事件绑定时机、伪元素生命周期和 Safari 的渲染管线里。