H5 中怎么用 @keyframes 实现 H5 页面中漂浮的彩色气球摇摆动画-H5教程-PHP中文网

h5中用@keyframes实现漂浮彩色气球动画需结合垂直位移、左右摇摆与随机参数：1.气球用div+伪元素绘绳子和高光；2.定义balloonfloat关键帧控制位移与旋转；3.通过css变量--delay/--duration/--size实现差异化；4.叠加透明度变化、高光微调及硬件加速优化真实感。

h5 中怎么用 @keyframes 实现 h5 页面中漂浮的彩色气球摇摆动画

在 H5 页面中用 @keyframes 实现漂浮的彩色气球摇摆动画，核心是结合**上下漂浮（垂直位移） + 左右轻微摇摆（旋转 + 水平位移） + 随机延迟/时长/大小**，让多个气球看起来自然、轻盈、不重复。

1. 气球基础结构与样式

每个气球用一个 <div> 表示，用伪元素画绳子和高光增强真实感： <ul> <li>用 <code>border-radius: 50% 做圆形气球主体，配合不同 background（渐变或纯色）模拟彩色；

用 ::before 画细长绳子（height: 60px，background: #999）；

给气球加 box-shadow 模拟高光，提升立体感；

统一设置 position: absolute，便于定位到页面任意位置。

2. 定义摇摆+漂浮复合动画（@keyframes）

一个气球要同时有「缓慢上升 → 轻微左右晃 → 小幅旋转」效果，推荐单个 keyframes 实现多属性联动：

@keyframes balloonFloat {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  25% {
    transform: translateY(-20px) translateX(-8px) rotate(-3deg);
  }
  50% {
    transform: translateY(-40px) translateX(0) rotate(0deg);
  }
  75% {
    transform: translateY(-20px) translateX(6px) rotate(2deg);
  }
  100% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
}

✅ 关键点：
– translateY 控制整体漂浮节奏（负值向上）；
– translateX 和 rotate 幅度要小（±3–8px / ±3deg），避免机械感；
– 动画总时长建议 8–12s，过快显浮躁，过慢无动感。

3. 让每个气球“不一样”——随机化关键参数

直接给所有气球加相同动画会很呆板。用 CSS 自定义属性（CSS 变量）配合 animation 简写，实现差异化：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

给每个气球设置不同 --delay（如 0.5s、2.3s）、--duration（如 9s、11.5s）、--size（控制缩放，模拟远近）；
CSS 中这样写：animation: balloonFloat var(--duration) ease-in-out infinite var(--delay);；
HTML 示例：<div class="balloon" style="--delay:1.2s; --duration:10.4s; --size:0.8;">； <li>再配合 <code>transform: scale(var(--size))，小气球可设更慢时长，模拟远处飘得更稳。