波纹点击效果可通过三种方式实现：一、纯CSS伪类模拟中心扩散；二、JS动态创建精准定位波纹元素；三、CSS变量+JS控制可配置波纹参数。
如果您希望为网页中的按钮添加视觉上吸引人的波纹点击效果，该效果需在用户点击时以点击位置为中心向外扩散，这通常通过 JavaScript 动态创建圆形遮罩并配合 CSS 过渡实现。以下是几种可独立使用的实现方法：
一、纯 CSS + :active 伪类模拟波纹（基础版）
此方法利用按钮自身作为波纹容器，通过 :active 状态触发一个绝对定位的圆形伪元素，配合 transform 和 opacity 实现简易扩散效果，无需 JavaScript，兼容性较好但无法精确定位点击坐标。
1、为按钮设置相对定位，并启用 overflow: hidden 以裁剪溢出的波纹。
2、在按钮 CSS 中添加 ::after 伪元素，初始状态设为 width 和 height 均为 0，opacity 为 0，背景色为半透明黑或主题色。
立即学习“前端免费学习笔记（深入）”；
3、在 :active 状态下，将 ::after 的 width 和 height 设置为足够覆盖按钮区域的值（如 200px），opacity 设为 0.2，并添加 transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)。
4、将 ::after 的 top 和 left 设为 50%，再用 transform: translate(-50%, -50%) 居中，确保波纹始终从中心扩散。
二、JavaScript 动态创建波纹元素（精准定位版）
该方法监听按钮 click 事件，获取鼠标相对于按钮左上角的偏移坐标，动态插入一个 元素作为波纹载体，将其 left/top 设置为点击点，并通过 CSS 过渡实现从点到圆的扩展与淡出。
1、为按钮添加 class="ripple-btn" 并确保其 position 为 relative。
2、在按钮的 click 事件处理函数中，调用 getBoundingClientRect() 获取按钮的位置信息。
3、计算点击点相对于按钮内边距的 x、y 偏移：const x = e.clientX - rect.left - btn.offsetLeft; const y = e.clientY - rect.top - btn.offsetTop;
4、创建 span 元素，设置其样式：position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.6); transform: translate(-50%, -50%); pointer-events: none;
5、将 span 的 left 和 top 分别设为 x + 'px' 和 y + 'px'，然后 append 到按钮内部，最后在 600ms 后 remove 该元素。
三、CSS 自定义属性 + JS 控制波纹尺寸与颜色（可配置版）
此方案将波纹的颜色、持续时间、尺寸上限等参数交由 CSS 自定义属性控制，JavaScript 仅负责注入坐标和触发，便于统一主题管理与复用。
1、在按钮 CSS 中定义 --ripple-color: rgba(0, 123, 255, 0.5); --ripple-duration: 600ms; --ripple-size: 240px;
2、在 JS 中创建波纹元素后，为其 style.setProperty() 设置 --x 和 --y 变量，对应点击横纵坐标。
3、在波纹元素的 CSS 规则中使用 calc(var(--x) + 'px') 和 calc(var(--y) + 'px') 作为 left/top 值。
4、设置 width 和 height 为 var(--ripple-size)，transition 使用 var(--ripple-duration) 控制动画时长。
5、在波纹元素添加完毕后，立即设置其 style.cssText = 'left: calc(var(--x) + "px"); top: calc(var(--y) + "px");'; 并触发重排，再添加 active 类启动过渡。
