涟漪点击效果 | wjs-css-effects

关键点

涟漪效果核心是点击时在鼠标位置生成圆形元素，从 scale(0) 放大到 scale(2.5) 并淡出
按钮必须设置 position: relative + overflow: hidden，限制涟漪在按钮范围内
JS 通过 getBoundingClientRect() 获取按钮位置，计算点击点相对按钮的坐标
涟漪圆的直径取按钮宽高中的较大值，确保能完全覆盖按钮的任意点击位置
pointer-events: none 防止涟漪元素阻挡后续点击事件，保证交互连续性
动画结束后用 setTimeout 移除 DOM 元素，避免节点堆积影响性能

效果说明

Material Design 风格的涟漪点击反馈。点击按钮时，JS 在鼠标落点位置插入一个圆形 span，通过 scale 放大并 opacity 淡出，模拟水波扩散。涟漪位置跟随点击点，比固定位置的动画更自然、更有反馈感。

CSS

JavaScript