波纹效果核心是用::after伪元素配合transform: scale()实现单圆放大+透明度渐变，需父容器position: relative、伪元素绝对定位居中，js动态设置点击坐标至css变量，transition须分别定义transform和opacity，时长350ms–450ms并用cubic-bezier(0.4,0,0.2,1)，ie11降级为:active模拟。
波纹效果的核心原理是 ::after 伪元素 + transform: scale()
不是用动画控制多个圆圈逐层扩散，而是用一个圆形伪元素从中心点放大并透明度渐变。浏览器渲染效率高，兼容性好（Chrome 4+、Firefox 16+、Safari 6.1+ 都支持）。关键在于：定位必须用 position: absolute，且父容器要设 position: relative，否则波纹会脱出按钮范围。
常见错误是直接给按钮加 overflow: hidden 却忘了设 position: relative，结果 ::after 相对于 body 定位，点击哪都从页面左上角开始扩散。
- 伪元素的
top/left必须设为50%，再用transform: translate(-50%, -50%)居中 - 初始
scale(0)，动画结束到scale(3.5)左右足够覆盖大按钮，太大反而模糊 -
background-color建议用rgba(0,0,0,0.1)这类低饱和值，避免遮盖按钮文字
如何让波纹始终从点击位置出发？
靠 JS 拿点击坐标动态设置伪元素的 left 和 top。纯 CSS 做不到——:active 伪类无法读取鼠标坐标。所以必须绑定 click 事件，计算相对于按钮左上角的偏移。
注意：不要用 getBoundingClientRect() 后直接赋值给 style.left，因为伪元素不支持内联样式。正确做法是把坐标存进自定义属性，比如 style.setProperty('--x', x + 'px')，然后在 CSS 里用 left: var(--x)。
- 获取坐标时记得减去
button.getBoundingClientRect().left/top，而不是event.clientX/Y直接用 - 移动端需监听
touchstart并阻止默认行为（event.preventDefault()），否则可能触发双击缩放 - 每次点击前先移除旧的波纹元素（或重置
scale和opacity），否则连续点击会堆叠
transition 的 timing-function 和 duration 怎么选？
波纹不是匀速放大，应该有“弹出感”：快起快收，中间稍缓。用 cubic-bezier(0.4, 0, 0.2, 1)（即 ease-in-out 的变体）比 ease 更自然；总时长控制在 350ms–450ms 最合适——短于 300ms 显得太急，长于 500ms 会让用户觉得按钮响应迟钝。
别只给 transform 加 transition，opacity 也得一起加，否则结束时会突然消失。写法必须是：transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1)，不能简写成 transition: all，那会导致其他属性（比如 color）也被意外过渡。
- 如果按钮有
border-radius，波纹圆角会自动匹配，但前提是伪元素也要设相同border-radius: 50% - 禁用状态（
disabled）下记得在 JS 中跳过波纹创建逻辑，否则点击无反馈还报错 - 暗色主题下，
rgba(255,255,255,0.1)比黑底白字更协调，别硬套同一套颜色
IE11 兼容方案怎么处理？
IE11 不支持 custom properties（即 var(--x)），也没 transform: scale() 的 will-change 优化。最稳妥的方式是降级为纯 CSS :active 效果：用 transform: scale(0.98) + opacity: 0.8 模拟按下反馈，不追求真实波纹。
强行在 IE11 里用 JS 注入 style 标签写内联 CSS 是可行的，但会污染 DOM、难以维护。不如用 @supports (animation-name: test) { ... } 包裹现代写法，让 IE11 自动跳过整个波纹逻辑。
- 检查
document.body.style.transform !== undefined可作为基础能力探测 - 不要试图用
filter: blur()模拟扩散，IE11 对 filter 支持极差，且性能爆炸 - 如果项目已用 PostCSS，加
autoprefixer并配"ie >= 11"即可自动补-ms-transform
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
