移动端涟漪不触发主因是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 元素作为涟漪载体：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 监听 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，可能意外捕获后续触摸，导致点击失效

真正难的不是写出涟漪，而是让每一次点击都落在用户预期的位置、时间、透明度上——而这往往取决于你是否愿意为那 200ms 的延迟多写三行 JS。

立即学习“前端免费学习笔记（深入）”；