圆心偏移需将鼠标坐标转为元素内相对坐标：用getboundingclientrect()获取元素位置，再用clientx/y减去left/top；涟漪用::after伪元素实现，通过background-size动画模拟扩散，移动端适配touchstart并设touch-action: manipulation。
点击位置计算不准，radial-gradient 圆心偏移怎么办
核心问题不是动画本身，而是鼠标点击坐标没对齐元素内坐标系。直接用 event.clientX / clientY 会以视口为基准，而 radial-gradient 的圆心定位（如 at 50px 100px）是相对于背景定位区域（即元素 content box 或 padding box）的。
必须转成相对元素左上角的坐标：
- 用
event.target.getBoundingClientRect()拿到元素在视口中的位置 - 减去
event.clientX - rect.left和event.clientY - rect.top - 注意：如果元素有
border或设置了background-origin，默认是padding-box，所以坐标应基于 padding 边界——通常直接用getBoundingClientRect()差值即可，无需额外减 border 宽度
如何用纯 CSS + JS 触发单次涟漪，避免多次点击叠加
CSS 本身不能监听点击并动态设 background-position，必须靠 JS 注入样式或切换 class。关键在「只生效一次」和「不阻塞后续点击」：
- 给元素添加
position: relative，涟漪用伪元素::after实现，避免污染真实背景 - JS 中每次点击生成唯一 class 名（如带时间戳），或复用一个 class 但用
element.classList.replace()清旧启新 - 动画结束后，用
animationend事件移除 class，否则后续点击无法再触发animation-name变更（CSS 动画不会重复触发同名动画） - 别用
background-image: radial-gradient(...)直接写死在元素上——那样无法动态改圆心位置
radial-gradient 涟漪半径怎么随动画自然扩展
不能靠 background-size 动画（它缩放的是整个渐变图样，不是从圆心扩散）。正确做法是固定渐变大小（如 radial-gradient(circle, rgba(0,0,0,0.2) 0%, transparent 70%)），只动 background-size 的两个值来“撑开”透明边缘，制造扩散感：
button.ripple::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: radial-gradient(circle, rgba(0,0,0,0.2) 0%, transparent 70%);
background-repeat: no-repeat;
background-position: center center;
background-size: 10px 10px; /* 初始小点 */
transition: background-size 0.4s ease-out;
}
button.ripple.ripple-active::after {
background-size: 300px 300px; /* 扩展到足够覆盖按钮 */
}
这里 background-size 控制的是渐变“图像”的宽高，数值越大，中心实色区占比越小，看起来就像涟漪向外推开。
移动端点击无响应或延迟，touchstart 怎么适配
PC 端用 click，移动端需监听 touchstart，但两者事件对象坐标字段不同：touchstart 要取 event.touches[0].clientX，且需阻止默认行为防滚动干扰：
- 统一提取坐标逻辑封装成函数，优先取
touches[0]，降级到changedTouches[0]，最后 fallback 到clientX/clientY - 给按钮加
touch-action: manipulation，减少 300ms 延迟 - 别在
touchstart里做重计算，只记坐标、加 class；动画交给 CSS 过渡，保证流畅 - 真机测试时注意：iOS Safari 对
background-size动画支持良好，但老 Android WebView 可能需加-webkit-前缀
最易被忽略的一点：涟漪的 z-index 必须高于按钮文字和图标，否则会被盖住；同时伪元素要设 pointer-events: none，不然会拦截后续点击。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
