用::after实现按钮波纹效果需JS动态设置点击坐标并绑定CSS动画：按钮设relative定位和overflow:hidden；::after初始隐藏、圆形、居中定位；点击时计算相对坐标写入--x/--y变量；动画从scale(0)opacity(0.6)扩散至scale(3)opacity(0)，结束保留状态。
用 ::after 伪元素实现按钮波纹点击效果，核心是：在点击时动态生成一个圆形遮罩，从点击位置中心向外扩散、透明度渐隐。关键在于获取点击坐标、定位伪元素、触发动画。
1. 基础结构与定位准备
按钮本身需设为相对定位（position: relative），以便 ::after 能以它为参考进行绝对定位。伪元素初始隐藏，尺寸为 0，圆角设为 50% 实现圆形。
- 给按钮加
position: relative; overflow: hidden;（防止波纹溢出） -
::after设为content: ""、position: absolute、border-radius: 50% - 初始状态：
opacity: 0; transform: scale(0);
2. 动态设置点击坐标（JS 必不可少）
CSS 无法自动读取鼠标位置，必须用 JavaScript 在点击时计算并写入自定义属性（如 --x、--y），再由 ::after 读取。
- 监听按钮
click事件 - 用
event.clientX - button.getBoundingClientRect().left算出相对于按钮的 X 坐标（同理算 Y） - 通过
button.style.setProperty('--x', x + 'px')和--y写入
3. 动画与样式绑定
伪元素通过 CSS 变量定位，并用 @keyframes 控制扩散+淡出。动画需设为 forwards 保证结束状态保留（避免闪回）。
立即学习“前端免费学习笔记（深入）”；
-
::after定位：left: var(--x); top: var(--y); transform: translate(-50%, -50) scale(0); - 动画关键帧：从
scale(0) opacity(0.6)→scale(3) opacity(0) - 触发动画：
transition: transform 0.4s ease, opacity 0.4s ease;或直接用animation
4. 防止连续点击错位的小技巧
快速连点可能导致多个波纹叠加或定位错误。可加简单节流或重置逻辑：
- 每次点击前先清除上一次的动画类（如有）或重置
::after的transform和opacity - 用
getComputedStyle检查是否正在动画中，跳过重复触发 - 或更简单：动画结束后用
animationend事件自动清空--x/--y
基本上就这些。不复杂但容易忽略 JS 坐标计算和伪元素定位的配合。做好这几点，波纹就能稳稳从指尖绽开。
