CSS如何实现按钮点击的波纹效果：利用CSS变量记录坐标参数
波纹效果必须用 ::after 或 ::before 伪元素实现
你可能会想，直接在按钮上添加背景动画不就行了？但那样做会覆盖按钮原有的样式，而且很难独立控制一个圆形的扩散过程。相比之下，伪元素方案的优势就凸显出来了：它能脱离文档流、层叠顺序可控，并且完美支持 transform: scale() 来实现平滑的缩放动画。关键在于，这个伪元素一开始是透明且没有尺寸的，只有在点击的瞬间，才动态地设置它的位置和大小。
- 按钮本身必须设置
position: relative，否则伪元素的absolute定位会跑到整个页面的左上角去。 - 伪元素少不了
content: ""这个声明，没有它，浏览器根本不会渲染这个元素。 border-radius: 50%是形成圆形的基础，漏掉它，扩散出来的就是一个方块。- 动画一定要用
transform: scale()，千万别用width/height来动画化——后者会频繁触发浏览器的重排，性能卡顿非常明显。
用 data-ripple-x 和 data-ripple-y 记录点击坐标
CSS本身无法直接读取鼠标点击事件，所以这一步必须借助Ja vaScript。我们需要把点击位置的数据存到按钮的自定义属性里，然后再用CSS变量接过来使用。这可以说是实现“纯CSS视觉波纹”效果中，唯一绕不开的Ja vaScript步骤。
- 在Ja vaScript中计算坐标时，记得用点击的全局坐标减去按钮左上角相对于视口的位置：
e.clientX - button.getBoundingClientRect().left。 - 存入数据时，建议直接带上
px单位（例如：button.dataset.rippleX = (x) + "px"），这样在CSS里使用时就省去了再做calc计算的麻烦。 - 在CSS中，应该使用
left: var(--x)，而不是left: attr(data-ripple-x)。因为attr()函数对单位运算的支持很差，而且在Safari等浏览器中的兼容性并不可靠。 - 务必在每次触发新点击前，清理掉旧的伪元素状态。可以通过
getComputedStyle(button).getPropertyValue('--x')判断变量是否存在，或者更直接地，用button.style.setProperty('--x', '0px')来重置。
transition 的时间与缓动必须匹配扩散逻辑
一个看起来舒服的波纹动画，可不是匀速放大的。它通常有个先快后慢的过程，既要照顾视觉上的节奏感，又要保证操作的响应感。过渡时间太长会显得拖沓，太短又像没反应。
- 推荐使用
transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1)。这个贝塞尔曲线比标准的ease-out更自然，动画收尾时更加柔和。 - 不要给
opacity单独设置一个transition。把它和transform合并到同一条声明里（如transition: transform 0.5s, opacity 0.5s），动画执行起来会更稳定。 - 如果按钮本身还有其他的交互状态（比如
:hover或:active），要确保波纹动画不会被这些状态的样式覆盖。通常需要给伪元素设置z-index: 1，并且注意不要在:active状态里重置transform属性。 - 在移动端开发时，记得用
touchstart事件来替代click，否则会遭遇那著名的300毫秒点击延迟。
IE 和旧 Safari 下伪元素定位会偏移
在老版本的浏览器里，坑就开始出现了。它们对 getBoundingClientRect() 这个API返回值的处理可能不一致，尤其是当按钮位于一个经过缩放（transform: scale()）的容器内，或者被放在iframe里时，坐标计算很容易出错。
立即学习“前端免费学习笔记（深入）”；
- 一种兼容性方案是：放弃使用
getBoundingClientRect()，改用e.pageX - e.target.offsetLeft来计算。但要注意，这需要确保按钮的父级元素没有border或padding，否则计算也会失准。 - 在Safari 14.1之前的版本，
attr()函数无法在calc()中使用。因此，依赖CSS变量来传递参数，是当前唯一可靠的跨浏览器方案。 - 如果项目必须支持IE11，那可能得放弃伪元素方案，转而用Ja vaScript动态创建
span标签并绝对定位。在这种情况下，data-属性更多是作为备用，核心的动画逻辑仍然要写在Ja vaScript里。 - 测试时，务必在真机上进行点按操作。模拟器里的
clientX/Y坐标经常是不准确的。
说到底，实现波纹效果最难的部分，往往不是写出动画本身，而是确保每一次点击，那个涟漪的圆心都能精准地落在按钮内容区的正中央——页面滚动、CSS变换、iframe嵌套，这些因素都会在不知不觉中扭曲这个“原点”。很多人自己调试时成功了，就以为万事大吉，结果上线后，在某个特定的安卓WebView里，波纹却总是朝着右下角跑偏。这才是真正需要警惕的地方。
