:active 伪类无法实现真正响应点击位置的扩散涟漪效果，因其不携带坐标信息、不支持动态设置 left/top 或 css 变量，涟漪圆心被写死在按钮中心，动画与实际点击点无关，且 ios safari 中常失效。
仅靠 :active 伪类无法实现真正响应点击位置的扩散涟漪效果，它最多只能模拟一个固定中心、固定路径的缩放动画。
为什么 :active 不能算“真涟漪”
因为 :active 是一个状态伪类，不携带任何坐标信息，也不支持动态设置样式属性（如 left、top 或 CSS 变量）。你看到的所谓“:active 涟漪”，本质是：
- 圆心被写死在按钮中心（
left: 50%; top: 50%; transform: translate(-50%, -50%)） - 动画只依赖
transform: scale()和opacity的过渡 - 所有点击都触发同一套动画，和用户实际点击位置完全无关
- 生命周期极短（通常几十毫秒），动画来不及播完状态就消失了
:active + ::after 的典型写法及缺陷
下面这段 CSS 看似能动，但问题明确：
.btn {
position: relative;
overflow: hidden;
}
.btn::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(0,0,0,0.1);
transform: scale(0);
transition: transform 0.4s, opacity 0.4s;
}
.btn:active::after {
transform: scale(2.5);
opacity: 0;
}
问题包括：
- 涟漪始终从按钮左上角开始放大（没居中逻辑，
transform: translate(-50%, -50%)缺失或未生效） - 即使加了
transform-origin: center，圆心仍是元素中心，不是点击点 - 移动端
:active在多数 iOS Safari 中默认不触发（需-webkit-tap-highlight-color: transparent配合） - 快速连点时，
:active状态来不及重置，动画卡住或跳帧
什么时候可以勉强用 :active？
仅当满足以下全部条件时，:active 方案才可接受：
- 设计允许“视觉近似”：不要求涟漪从点击点出发，只要有个中心扩散感即可
- 目标平台明确排除 iOS Safari / 旧版 Android WebView（或已加
cursor: pointer+tapping修复） - 按钮尺寸固定、无滚动/重排风险（否则
transform-origin偏移会更明显） - 不需支持键盘
Enter/Space触发（:active对键盘焦点无效）
真正要“从点击点扩散”，必须补 JS
哪怕只用 :active 打底，真实涟漪仍需 JS 注入坐标。关键动作不是替换 :active，而是绕过它：
- 监听
click或mousedown（PC）+touchstart（移动端） - 用
getBoundingClientRect()算出点击相对偏移，设为--x/--y - 让
::after的left和top绑定这两个变量，再配合transform: scale() - 动画结束后手动清理，避免 DOM 或伪元素残留
最易被忽略的是：按钮没设 position: relative，或忘了 overflow: hidden——这两条一漏，涟漪立刻溢出或定位飘移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
