无法用 :active 触发撒花动画，因其仅在按压时生效、松开即失效，无法完成完整动画；必须用 JS 动态创建花瓣元素、注入随机 CSS 变量、添加动画 class，并在 animationend 后清理 DOM。
用 :active 无法触发撒花动画？因为点击态太短
纯 CSS 实现“点击后撒花”，最大的陷阱是依赖 :active 伪类——它只在鼠标按下/手指按住时生效，松开就消失，根本来不及播完动画。撒花需要的是「点击触发 → 播放一次 → 自动结束」的可控流程，必须靠 JS 控制动画的启动时机和生命周期。
真实场景中，你点的是按钮、图标或卡片，目标是：点一下，从点击位置炸出几朵随机飘散的 div 花瓣，带旋转、缩放、透明度渐变和缓动。
-
:active只适合做按压反馈（比如按钮凹下），不适合做后续动画 - 动画必须用
@keyframes定义，但触发必须由 JS 添加 class 来启动 - 花瓣元素得动态创建并插入 DOM，否则没法从点击坐标出发
撒花动画的核心 CSS：用 transform + opacity + animation
花瓣本身是小 div 或 span，用 background 或 emoji（如 ?）都行，关键是位移和消失逻辑要靠 CSS 动画控制。不能用 top/left，必须用 transform: translate() 保证性能。
下面这段是单个花瓣的典型动画定义：
立即学习“前端免费学习笔记（深入）”；
@keyframes petal-fall {
0% {
transform: translate(0, 0) rotate(0deg) scale(1);
opacity: 1;
}
100% {
transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0);
opacity: 0;
}
}注意：--tx、--ty、--rot 是自定义属性，由 JS 注入，让每个花瓣轨迹不同；scale(0) 和 opacity: 0 必须同时用，避免视觉残留。
- 动画时长建议 800ms–1200ms，太短像闪，太长显拖沓
- 必须加
animation-fill-mode: forwards，否则动画结束瞬间会跳回初始态 - 别用
animation-direction: reverse回退，撒花是一次性效果，结束后元素应被 JS 清理
JS 触发的关键三步：获取坐标、生成花瓣、清理 DOM
点击事件监听器里不能只加 class，得真正“造花”。核心是拿到 clientX/clientY，再用 document.elementFromPoint 或直接挂载到目标元素上，确保坐标相对视口准确。
- 每次点击生成 8–15 个花瓣，太少没气氛，太多卡顿（尤其低端机）
- 每个花瓣设随机
--tx（±100px）、--ty（+80–200px）、--rot（-360–360deg） - 动画结束后必须用
animationend事件移除元素，否则 DOM 节点越积越多 - 给花瓣加
pointer-events: none，避免挡住底层交互
示例片段（绑定在按钮上）：
btn.addEventListener('click', (e) => {
const rect = btn.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
<p>for (let i = 0; i < 12; i++) {
const petal = document.createElement('span');
petal.className = 'petal';
petal.style.setProperty('--tx', <code>${(Math.random() - 0.5) * 200}px</code>);
petal.style.setProperty('--ty', <code>${80 + Math.random() * 120}px</code>);
petal.style.setProperty('--rot', <code>${-360 + Math.random() * 720}deg</code>);
petal.style.left = <code>${x}px</code>;
petal.style.top = <code>${y}px</code>;
btn.appendChild(petal);</p><pre class='brush:php;toolbar:false;'>petal.addEventListener('animationend', () => petal.remove());} });
移动端点击延迟与兼容性坑
iOS Safari 和部分安卓 WebView 对 click 事件有约 300ms 延迟，导致撒花滞后。必须用 touchstart 替代，但要注意防止重复触发（比如滑动时误点）。
- 同时监听
click和touchstart，用event.cancelable或preventDefault()控制（仅对touchstart） - CSS 动画在 iOS 15–16 有
transform渲染异常问题，加will-change: transform到花瓣元素可缓解 - 别用
filter: blur()做花瓣虚化，低端机掉帧严重；改用多层半透叠加更稳 - 如果页面启用了
passive: true的 touch 事件监听，preventDefault()会报错，需单独处理
撒花不是炫技，是状态反馈。坐标算偏了、花瓣飞出屏幕、动画卡在半路……这些问题比“怎么写”更常耽误上线。盯住那几个自定义属性和 animationend 的清理时机，基本就稳了。
