h5金币飘落效果需js动态创建元素并设置随机css变量（如--tx、--rot、animation-duration），配合@keyframes fall-spin实现位移、旋转、透明度变化，用cubic-bezier优化运动曲线，动画结束自动移除元素。
在 H5 中实现金币或积分掉落时的随机飘落与旋转效果，核心是用 CSS @keyframes 配合动态生成的动画属性（如不同 transform、opacity、animation-duration 等），再结合 JavaScript 控制每个元素的随机参数。纯 CSS 无法生成真正随机值，所以需 JS 动态写入样式或设置内联动画属性。
1. 用 JS 动态创建带随机参数的金币元素
每次触发掉落（比如点击、结算完成），用 JS 创建一个 <div class="coin"> 元素，并为其设置唯一且随机的动画参数：<ul>
<li>
<strong>水平偏移</strong>：用 <code>Math.random() * 100 - 50 生成 -50px ~ +50px 的 left 值（相对于容器）
1.2 + Math.random() * 1.5 得到 1.2s ~ 2.7s 的 animation-duration
Math.random() * 720 - 360 实现 ±2 圈的随机旋转（配合 rotate()）scale(0.8) → scale(1.2) → scale(1) 和 opacity: 0 → 1 → 0.8 模拟轻盈感2. 定义基础关键帧动画（支持变量注入）
写一个通用的 @keyframes fall-spin，覆盖位移、旋转、透明度变化。注意用 transform 合并操作提升性能：
@keyframes fall-spin {
0% {
transform: translateY(-20px) translateX(0) rotate(0deg) scale(0.7);
opacity: 0;
}
30% {
opacity: 1;
}
70% {
transform: translateY(70vh) translateX(var(--tx, 0px)) rotate(var(--rot, 0deg));
}
100% {
transform: translateY(85vh) translateX(var(--tx, 0px)) rotate(var(--rot, 0deg)) scale(0.95);
opacity: 0.8;
}
}
⚠️ 注意：var(--tx) 和 var(--rot) 是 CSS 自定义属性，需通过 JS 设置到元素上（见下一步）。
3. JS 注入随机 CSS 变量并启动动画
为每个金币元素设置内联 CSS 变量和动画属性：
const coin = document.createElement('div');
coin.className = 'coin';
const tx = (Math.random() * 100 - 50) + 'px'; // 水平抖动
const rot = (Math.random() * 720 - 360) + 'deg';
const dur = (1.2 + Math.random() * 1.5) + 's';
<p>coin.style.setProperty('--tx', tx);
coin.style.setProperty('--rot', rot);
coin.style.animation = <code>fall-spin ${dur} cubic-bezier(0.22, 0.61, 0.36, 1) forwards</code>;</p><p>document.body.appendChild(coin);
// 动画结束后自动移除元素
coin.addEventListener('animationend', () => coin.remove());</p>
使用 cubic-bezier(0.22, 0.61, 0.36, 1) 让下落先缓后急再略回弹，更自然；forwards 保证结束时保留最终样式。
4. 优化细节提升真实感
-
添加轻微晃动：在关键帧中插入
translateX(calc(var(--tx) * sin(1.5turn)))类似逻辑（需配合 JS 计算或用offset-path+motion-path，但兼容性略低） -
多金币错峰出发：用
setTimeout给连续金币加 0.1~0.3s 延迟，避免堆叠 - 限制最大并发数：防止页面卡顿，例如同时最多显示 8 个金币，旧的未结束就跳过或合并
-
适配移动端：用
vh而非px定义垂直距离，确保不同屏幕高度下都掉出视口
不复杂但容易忽略：动画元素建议用 position: fixed 或 absolute 脱离文档流，避免影响布局；金币图片用 will-change: transform 或启用 GPU 加速（transform: translateZ(0)）可进一步提升流畅度。
