纯css无法实现真正波纹效果，因:active伪类不支持坐标计算、状态过短且移动端默认不触发；必须结合js获取点击坐标并动态控制::after伪元素的定位与动画。

纯 CSS 方案只能做瞬时反馈（比如缩放、变色），无法实现真正意义上的波纹效果；:active 状态太短、不支持坐标计算、默认不启用，硬要用它写波纹只会“点下去没反应”或“松手还在动”。

为什么 :active 缩放在真机上经常失效

根本原因不是 Tailwind 写错了，而是移动端 WebKit（尤其是 Safari）压根不触发 :active 伪类，除非你显式告诉它“这个元素可交互”。常见漏掉的点：

• 没加 cursor-pointer —— iOS Safari 需要这个才能激活 :active
• 没设 touch-action-manipulation —— 否则 touchstart 事件被浏览器拦截，:active 不会进入
• 父容器有 overflow-hidden 或 pointer-events-none —— 事件冒泡被截断，子元素收不到 :active
• 用了 transition-all 却没配 transition-timing-function —— 导致缩放卡顿或跳变

active:scale-95 要生效必须带这三样东西

缺一不可，否则就是“啪一下缩、啪一下弹回”，毫无动画感：

• 基础类里必须声明 transition-transform 和 duration-100（推荐 100–150ms，200ms 以上就拖沓）
• 按钮本身得有 transform —— Tailwind 的 scale 类依赖 transform 属性，没它就无效
• 缩放中心建议用 origin-center（默认）或 origin-[50%_75%] 微调，别全靠默认值

正确写法示例：class="bg-blue-500 transform transition-transform duration-150 active:scale-95 origin-center"

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

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

下载

伪元素模拟波纹？别信“纯 CSS”宣传

网上所谓“纯 CSS 波纹”，其实都偷偷用了 JS 注入坐标。因为 :active 和 ::after 无法绑定点击位置 —— 它们不知道用户点在哪。真要靠伪元素撑起波纹，必须：

• 按钮加 relative，否则 ::after 会相对 body 定位
• ::after 必须设 content:""、absolute、border-radius:50%、pointer-events-none、opacity:0、transform:scale(0)
• JS 动态写入 --x / --y CSS 变量，并在 CSS 中用 left:var(--x) + top:var(--y) 定位
• 移动端必须监听 touchstart 并取 e.touches[0].clientX，click 在 iOS 上有 300ms 延迟且坐标不准

也就是说：所谓“纯 CSS 波纹”，只是把 JS 逻辑藏在了变量注入里，DOM 操作和坐标计算一个没少。

真正容易被忽略的不是怎么写动画，而是 Safari 的渲染 bug（transform + top/left 组合卡顿）、连点时旧波纹没清理干净、以及 touch 和 mouse 事件没做 fallback —— 这些不处理，哪怕代码全对，真机上照样失效。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！