伪元素::after实现按钮波纹效果需设按钮position: relative、::after为absolute并居中，content: ""不可少，加pointer-events: none防事件拦截，移动端须JS配合touchstart触发。
伪元素 ::after 怎么盖在按钮上还不遮挡文字
关键不是加不加 ::after，而是它得「和按钮共用一个定位上下文」。否则波纹会飘到页面角落，或者被文字压住。
必须给按钮设 position: relative，再让 ::after 用 position: absolute 贴着它定位。
常见错误是忘了给按钮加 position，结果 ::after 相对于 body 或父容器定位，一点击波纹就飞了。
-
::after必须声明content: ""，否则不渲染 - 宽高要设成足够覆盖整个按钮（比如
width: 200%; height: 200%），再靠top: 50%; left: 50%和transform: translate(-50%, -50%)居中 - 别设
z-index过高——如果按钮里有图标或文字子元素，它们可能被波纹盖住；一般保持默认层叠顺序更安全
波纹怎么从点击位置开始扩散
纯 CSS 没法读取鼠标坐标，所以不能真正「动态定位」波纹中心。但可以用 :active + transform 模拟：把波纹做成全按钮覆盖、透明度渐变的圆，点击时立刻缩放并淡入。
真实效果依赖的是「视觉欺骗」：人眼对中心对称扩散敏感，只要动画快、圆够大、边缘柔和，就不会觉得它是固定中心的。
- 用
border-radius: 50%确保是正圆 - 动画起始状态设
scale: 0; opacity: 0.3，结束状态scale: 4; opacity: 0（数值根据按钮尺寸微调） - 别用
transition，要用animation配合@keyframes，否则松开鼠标时波纹会倒放 - 动画时长控制在
300ms左右，太慢像卡顿，太快看不出效果
为什么 pointer-events: none 必须加在 ::after 上
因为波纹是盖在按钮上的绝对定位元素，如果不关掉它的鼠标事件，它会拦截后续所有点击——点一次按钮，第二次就点不中了。
这是最容易被忽略的兼容性坑：Chrome/Firefox 表现一致，但某些旧版 Safari 在没加 pointer-events: none 时，会导致按钮连续点击失灵。
- 只加在
::after规则里，别加在按钮本体上 - 别写成
pointer-events: auto或留空，必须明确写none - 如果按钮本身用了
disabled，::after也要同步加opacity: 0，否则禁用状态下还能看到半透明波纹
移动端点击区域小、延迟高，怎么适配
原生触摸事件有约 300ms 延迟，CSS 的 :active 在 iOS Safari 上响应滞后甚至不触发。不能只靠 :active，得补一层 JS 控制类名，再用 .ripple-active 触发动画。
- 监听
touchstart（不是click），立即给按钮加类名，避免延迟 - 用
getBoundingClientRect()算出点击坐标，再通过style.left/style.top动态设置::after的位置（需配合 JS 创建临时元素或内联样式） - 动画结束后用
setTimeout移除类名，防止多次点击堆积动画 - 如果项目已用 React/Vue，优先用组件状态控制波纹显隐，比纯 CSS 更可控
波纹看起来简单，但真正在不同设备、不同交互方式下稳定触发，核心不在动画本身，而在「事件捕获时机」和「层叠上下文控制」——这两处一错，效果就断在用户手指底下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
