纯css实现砸金蛋效果需js控制触发与状态管理，推荐结构为egg容器内含shell（裂开动画）和prize（动态显示），用animationend监听替代fill-mode，加data-locked防连点，textcontent防xss，touchstart+click双兼容保障移动端响应。
砸金蛋动画用 CSS 动画 + JavaScript 控制最稳
纯 CSS 实现砸金蛋的“裂开+弹出奖品”效果是可行的，但必须配合 JS 触发时机和状态管理，否则容易出现动画卡顿、重复触发、奖品错位等问题。关键不是堆 fancy 效果，而是控制 animation 的播放状态和 DOM 节点的生命周期。
推荐结构：一个 <div class="egg"> 作为容器，内部包含 <code><div class="shell">（蛋壳）和 <code><div class="prize">（奖品），初始隐藏奖品，点击后给 <code>.shell 添加裂开动画类，动画结束后再显示并动画入场 .prize。
- 裂开动画建议用
@keyframes crack配合transform: scale(1.2) rotate(15deg)+opacity渐隐，避免用clip-path（iOS Safari 兼容差） - 不要用
animation-fill-mode: forwards直接冻结裂开态——它会干扰后续 JS 判断动画是否结束，改用监听animationend事件 - 每个金蛋必须有唯一
data-id，JS 中通过e.target.closest(".egg")定位，防止嵌套点击冒泡误触发
点击后禁用按钮 + 防连点必须手动加锁
用户猛点一下就触发多次砸蛋，不是动画没播完的问题，而是 JS 事件没做节流。CSS 动画本身不会阻止重复调用 element.classList.add()，所以必须靠 JS 锁住状态。
- 在点击回调开头加
if (egg.hasAttribute("data-locked")) return;，砸蛋开始前设egg.setAttribute("data-locked", "") - 在
animationend回调里移除该属性，而不是依赖setTimeout—— 动画时长可能被用户缩放或系统性能影响 - 视觉反馈要同步：禁用时给按钮加
opacity: 0.5; pointer-events: none;，别只靠 JS 逻辑锁
奖品内容动态插入得避开 innerHTML XSS 风险
如果奖品文字来自后端 API（比如 { prize: "iPhone 15" }），直接 prizeEl.innerHTML = data.prize 会有 XSS 隐患。哪怕只是纯文本，也建议走安全路径。
- 优先用
prizeEl.textContent = data.prize，它自动转义 HTML 字符 - 如果奖品含简单格式（如加粗“一等奖”），用
DOMPurify.sanitize()处理后再innerHTML，别手写正则过滤 - 奖品图标用 SVG Sprite 或
<img>标签预置，不要拼接<img src="...">，URL 未校验易出错
移动端点击区域小、响应延迟高，得补 touch 适配
iOS Safari 对 click 事件有约 300ms 延迟，且默认点击热区只有 44×44px，金蛋若小于这个尺寸，用户会感觉“点不中”。
- 给
.egg加touch-action: manipulation;，关闭双击缩放，同时启用更快的 touch 点击响应 - 确保金蛋最小尺寸 ≥ 44px，或用
padding扩展点击区，别只靠width/height - 监听
touchstart替代click，但注意 PC 端也要兼容：用el.addEventListener("click", handler); el.addEventListener("touchstart", handler, { passive: true });
真正难的不是让蛋裂开，而是保证用户无论在哪台设备、点得多快、网络多差，都能看到一次完整、不重复、不闪跳的反馈。动画时长、锁状态时机、事件绑定方式，三者稍不匹配，体验就断了。
