用 clip-path 实现波纹效果最轻量纯 css，核心是 position: relative 按钮内绝对定位遮罩圆，动画起始为 circle(0 at center)，需 @keyframes + animation-fill-mode: forwards 防闪退，兼容性差时降级 radial-gradient。
点击时波纹从中心向四周扩散，用 clip-path 最轻量
纯 CSS 实现波纹效果，clip-path 是目前最简洁、无 JS 依赖的方案。它利用圆形裁剪 + 动画缩放，视觉上就是水波荡开的效果。关键不是“画圆”，而是“瞬间放大一个遮罩圆”。
- 必须给按钮设
position: relative，否则clip-path的坐标基准会错位 - 波纹元素要用
position: absolute+inset: 0覆盖整个按钮，且z-index不能低于按钮内容（否则文字被裁） - 动画起始状态要设
clip-path: circle(0 at center)，注意at center不能省略，否则默认锚点在左上角 - 不要用
transform: scale()模拟波纹——它会拉伸内部文字或图标，破坏清晰度
:active 状态下触发动画，但需防连续点击失灵
直接写 :active { clip-path: circle(150% at center) } 看似简单，但用户快速连点时，:active 状态可能来不及触发第二次动画。根本原因是浏览器对 :active 的状态保持时间极短，且不重置动画时间轴。
- 必须配合
@keyframes显式定义动画，并在:active中调用animation（而非仅靠 transition） - 动画要设
animation-fill-mode: forwards，否则动画结束立刻回退，波纹“闪一下就没了” - 更稳妥的做法是用 JS 监听
click，动态添加 class 并在动画结束后移除——尤其当按钮需支持键盘Enter触发时
兼容性要注意：Safari 15.4+ 才支持 clip-path 动画
旧版 Safari（包括 iOS 15.3 及更早）对 clip-path 的动画支持不完整，会出现波纹卡在初始状态或直接不显示。这不是写法问题，是渲染引擎限制。
- 可降级方案：用
background-image: radial-gradient()配合background-size动画，虽略重但兼容性好（IE11 都能跑） - 若坚持用
clip-path，务必加@supports (clip-path: circle())包裹，避免老浏览器解析失败导致样式崩坏 - 别信“加
-webkit-clip-path就行”——Safari 旧版本加前缀也无效，这是底层限制，不是语法问题
真实项目中容易漏掉的细节
波纹按钮看着小，但上线后常因几个细节被 QA 打回：圆角按钮边缘裁切异常、深色模式下波纹颜色看不清、触摸屏点击反馈延迟明显。
- 按钮有
border-radius？那波纹元素也要同步设置相同值，否则裁剪边缘会露白边 - 波纹颜色建议用
rgba(255,255,255,0.3)而非固定色值，确保在深色/浅色背景下都可见 - 移动端必须加
touch-action: manipulation，否则 iOS Safari 默认有 300ms 点击延迟，波纹响应像卡顿 - 如果按钮含 SVG 图标，记得给 SVG 设
pointer-events: none，否则波纹层可能拦截不到点击事件
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
