CSS如何制作按钮点击涟漪动画_运用伪元素关键帧

按钮点击时涟漪不居中是因为::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 触发），旧动画没结束，新动画又覆盖上去。

• 给按钮加防抖：记录上一次涟漪的 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 的渲染管线里。