移动端涟漪不触发主因是ios safari等浏览器默认禁用:active伪类以避免误触，须加touch-action: manipulation启用；纯css方案连点易错位，js动态创建涟漪元素可确保坐标精准、互不干扰。
移动端点击按钮时涟漪不触发？检查 :active 伪类是否被禁用
很多移动端页面点击无涟漪，根本原因不是动画写错了，而是 :active 在 iOS Safari 和部分安卓浏览器中默认不生效——因为浏览器为避免误触会延迟或忽略该状态。必须显式启用：
body { -webkit-tap-highlight-color: transparent; }<br>button, a { -webkit-user-select: none; touch-action: manipulation; }其中 touch-action: manipulation 是关键，它告诉浏览器“这个元素只做点击/拖拽”，从而确保 :active 可靠触发。用 radial-gradient 实现涟漪的核心结构
涟漪本质是背景从点击点向外扩散的径向渐变色块。不能直接在按钮上叠 background-image，否则会覆盖原有背景；推荐用伪元素 ::after 承载渐变，并用 position: absolute 定位到点击坐标：
- 给按钮设
position: relative，保证伪元素可精确定位 -
::after的background-image设为radial-gradient(circle, rgba(0,0,0,0.2) 0%, transparent 70%) - 初始
transform: scale(0)，opacity: 0；:active状态下改为transform: scale(3)+opacity: 1，配合transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)
scale(3) 是保守值，过大会导致涟漪超出按钮边界；若需精准适配不同尺寸按钮，得用 JS 动态计算半径并注入 CSS 变量。为什么纯 CSS 涟漪在快速连点时会错位？
纯 CSS 方案依赖 :active，而连续点击时浏览器可能来不及重置状态，导致新涟漪从旧坐标开始、或多个涟漪叠加。更可靠的做法是用 JS 捕获 touchstart（非 click，因有 300ms 延迟），动态创建一个 span 元素作为涟漪载体：
- 监听
touchstart，用event.touches[0].clientX/Y获取真实点击位置 - 计算相对于按钮左上角的偏移：
left = x - rect.left - rippleSize/2 - 插入带内联样式的
span，设置background、border-radius: 50%、transform: scale(0) - 用
setTimeout或transitionend清理 DOM，避免内存堆积
兼容性与性能取舍：CSS vs JS 方案怎么选？
如果项目只需基础反馈且支持 iOS 13+ / Android Chrome 80+，纯 CSS 更轻量；但一旦需要支持老版本或要求高精度（如 Material Design 规范中的「中心涟漪」「边缘涟漪」），JS 是唯一选择。另外注意两个坑：
- CSS 方案在
button[type="submit"]上提交瞬间可能中断动画，建议加pointer-events: none到伪元素防止拦截事件 - JS 创建的涟漪元素若未设
pointer-events: none，可能意外捕获后续触摸，导致点击失效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
