用css关键帧+js动态创建实现砍价气泡向上冒泡动效：气泡从底部随机位置出发，以不同速度、时长、大小和透明度上升并淡出，通过@keyframes定义三段动画（升起→轻晃放大→顶部淡出），js控制随机参数与定时生成。
用 CSS 关键帧（@keyframes）实现“砍价气泡向上冒泡”动效，核心是让每个气泡从底部随机位置出发，以不同速度、时长、大小和透明度上升并淡出。不需要 JS 也能做基础效果，但要“不断”“随机”“多个”，建议用 JS 动态创建气泡元素 + CSS 动画控制。
1. 气泡结构与基础样式
每个气泡是一个 <div class="bubble">，绝对定位在容器内（如活动页底部区域）。初始状态设为不可见、透明、缩放为 0：<font size="2"><pre class="brush:php;toolbar:false;">.bubble {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) scale(0);
opacity: 0;
pointer-events: none;
user-select: none;
}</pre></font><h3>2. 定义向上冒泡的关键帧动画</h3>
<p>动画分三段：从底部升起 → 中途轻晃/放大 → 顶部淡出消失。用 <code>@keyframes bubble-rise 描述：
@keyframes bubble-rise {
0% {
transform: translateX(-50%) translateY(0) scale(0);
opacity: 0;
}
10% {
transform: translateX(-50%) translateY(-20px) scale(0.8);
opacity: 0.8;
}
70% {
transform: translateX(calc(-50% + (var(--dx) * 1px))) translateY(-80vh) scale(1.1);
opacity: 1;
}
100% {
transform: translateX(calc(-50% + (var(--dx) * 1px))) translateY(-100vh) scale(0.9);
opacity: 0;
}
}说明：
• --dx 是自定义属性，用于 JS 注入左右偏移（如 -30~30），让气泡路径不完全垂直
• translateY(-100vh) 确保升出视口顶部
• 中间加轻微 scale(1.1) 和横向偏移，模拟“轻盈上浮”感
3. JS 动态生成并启动气泡
定时器（如每 300ms）创建一个新气泡，随机设置关键参数，并触发动画：
- 随机
left（或用--dx控制横向偏移） - 随机
width/height（如 24px–64px） - 随机
animation-duration（1.2s–2.5s），越小越快 - 随机
animation-delay（可选，错峰出发） - 绑定动画结束后自动
remove()，避免节点堆积
function createBubble() {
const bubble = document.createElement('div');
bubble.className = 'bubble';
<p>const size = 24 + Math.random() <em> 40;
const duration = 1.2 + Math.random() </em> 1.3;
const dx = (Math.random() - 0.5) * 60; // -30 ~ +30</p><p>bubble.style.width = <code>${size}px</code>;
bubble.style.height = <code>${size}px</code>;
bubble.style.setProperty('--dx', dx);
bubble.style.animation = <code>bubble-rise ${duration}s ease-out forwards</code>;</p><p>bubble.addEventListener('animationend', () => bubble.remove());
document.querySelector('.bubble-container').appendChild(bubble);
}</p><p>setInterval(createBubble, 300);</p>4. 补充细节提升真实感
• 气泡用 border-radius: 50% + 径向渐变背景（浅白→透明）更柔和
• 加 filter: blur(0.5px) 轻微模糊，减少锯齿
• 可叠加 1–2 层不同大小/速度的气泡，营造层次感
• H5 页面注意开启硬件加速：transform: translateZ(0) 或 will-change: transform
