:active 伪类无法实现真正的点击波纹，因其仅在按下瞬间触发、松开即消失，无法支撑中心扩散+渐隐的圆形动画；波纹需动态生成 dom 节点并独立控制尺寸、透明度与动画曲线。
为什么直接用 :active 做不了真正的点击波纹
因为 :active 伪类只在鼠标按下/触摸开始时触发，松开就立刻消失，无法撑起一个从中心扩散、渐隐的圆形动画。波纹需要「动态生成」+「独立生命周期」，纯 CSS 伪类做不到——它没有 DOM 节点，没法单独控制动画时长、尺寸和透明度曲线。
用 JavaScript 动态插入 .ripple 元素是最稳的方案
核心思路：监听 click（或 touchstart），计算点击坐标，创建一个绝对定位的 <span class="ripple"></span>，设置其 left/top 和初始 width/height，再通过 Tailwind 的 animate- 工具类触发动画。
- 必须给父容器加
relative，否则absolute的波纹会相对 body 定位 - 波纹元素推荐用
pointer-events-none，避免干扰后续点击 - 动画结束要手动
remove()波纹节点，否则内存泄漏（尤其高频点击） - 移动端需同时监听
touchstart并用touches[0]取坐标，不能只靠clientX/Y
示例关键代码：
element.addEventListener('click', (e) => {
const ripple = document.createElement('span');
const rect = element.getBoundingClientRect();
const size = Math.max(rect.width, rect.height) * 1.5;
const x = e.clientX - rect.left - size / 2;
const y = e.clientY - rect.top - size / 2;
<p>ripple.className = 'absolute rounded-full bg-black/20 pointer-events-none animate-ripple';
ripple.style.left = <code>${x}px</code>;
ripple.style.top = <code>${y}px</code>;
ripple.style.width = <code>${size}px</code>;
ripple.style.height = <code>${size}px</code>;</p><p>element.appendChild(ripple);</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div><p>ripple.addEventListener('animationend', () => ripple.remove());
});
</p>
Tailwind 中必须自定义 @keyframes ripple
Tailwind 默认不提供波纹动画，得在 tailwind.config.js 的 theme.extend.animation 和 keyframes 里补全。重点是：动画要包含 scale 和 opacity 两段变化，且起始 transform: scale(0)，结束 transform: scale(3) + opacity: 0，否则看起来像硬扩张。
- 别用
animate-ping替代——它是循环脉冲，不是单次扩散 - 动画时长建议设为
300ms～450ms，太快没感知，太慢显卡顿 - 加
ease-out或ease-[cubic-bezier(0.22,0.61,0.36,1)]让扩散有减速感
移动端真机上 click 有 300ms 延迟，必须防坑
直接绑 click 在 iOS/Android 上会导致波纹响应滞后，用户明显感觉“点了没反应”。解决方案只有两个：
- 加
touchstart监听，并在事件回调里e.preventDefault()（如果父层没禁用默认行为） - 更推荐：用
class="cursor-pointer active:opacity-80"先做视觉降级反馈，再配合touchstart插入波纹，兼顾兼容与体验 - 注意 Safari 对
transform: scale()在position: absolute元素上的渲染 bug，可加will-change: transform强制 GPU 加速
波纹效果真正难的不是写出来，而是让每个设备、每种交互路径（鼠标、触屏、键盘 focus）都有一致的起始位置和销毁时机——坐标算错一像素，或者忘了移除节点，都会让体验断掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
