可用::after伪元素配合JS动态定位与CSS动画实现按钮波纹效果：按钮设relative定位，JS记录点击坐标存为CSS变量，伪元素通过translate(-50%,-50%)居中并scale缩放，触发动画后移除临时类防堆叠。
可以用 ::after 伪元素配合 CSS 动画，在按钮点击时模拟波纹扩散效果。核心思路是：监听 :active 状态，动态设置伪元素的圆心位置（通过 transform: translate() 居中）和缩放动画，同时控制透明度变化。
1. 基础结构与定位准备
按钮需设为相对定位（position: relative），以便 ::after 伪元素能绝对定位在按钮内部中心；伪元素初始隐藏，用 opacity: 0 和 transform: scale(0) 控制起始状态。
- 按钮本身不要设置
overflow: hidden（否则波纹可能被裁剪） - 确保按钮有明确的宽高或内边距，否则点击区域不明确
- 推荐给按钮加
user-select: none，避免点击时文字被选中
2. 用 JavaScript 动态计算点击坐标
CSS 无法直接获取点击坐标，必须借助 JS 在点击时记录 clientX/clientY，并将其转为相对于按钮左上角的偏移值，再设为伪元素的 left 和 top（通过自定义属性传递）。
- 给按钮绑定
click事件，计算e.clientX - rect.left和e.clientY - rect.top - 用
style.setProperty('--x', x + 'px')和--y把坐标存为 CSS 变量 - 伪元素通过
left: var(--x); top: var(--y)定位，再用transform: translate(-50%, -50%) scale(0)精准居中
3. 波纹动画与样式细节
动画触发依赖 .btn:active::after，但注意：纯 CSS 无法在 :active 中“启动”新动画（部分浏览器不支持），所以实际用 JS 添加临时类（如 .ripple），再用该类触发动画更可靠。
立即学习“前端免费学习笔记（深入）”；
- 伪元素设
content: ''、position: absolute、border-radius: 50%、background: rgba(0,0,0,0.1) - 动画关键帧：从
scale(0) opacity(0.5)到scale(3) opacity(0)，时长建议 400–600ms，缓动用cubic-bezier(0.4, 0, 0.2, 1) - 动画结束后自动移除
.ripple类，避免重复点击堆叠多个波纹
4. 兼容性与优化提示
旧版 Safari 对伪元素动画支持较弱，建议加 -webkit-transform 和 -webkit-animation 前缀；移动端需注意 touchstart 替代 click 避免 300ms 延迟。
- 为防止快速连点产生多个波纹，可在 JS 中加节流（如 200ms 内忽略后续点击）
- 若按钮是圆形，波纹默认适配；矩形按钮建议限制最大扩散半径（如
max-width: 300px）避免溢出 - 深色主题下可动态改波纹颜色：用
color-scheme: light dark或 JS 检测matchMedia('(prefers-color-scheme: dark)')
不复杂但容易忽略。
