纸小船自然浮动需用@keyframes实现轻微、有节奏、带弹性的起伏：1.基础动画用translateY±8px配合3s ease-in-out循环；2.增强版叠加±0.5°旋转与±0.5%缩放；3.配合水面背景、水花阴影及反光高光；4.注意H5兼容性与性能优化。
用 @keyframes 实现纸小船在水面上“自然”起伏，关键不是单纯上下平移，而是模拟浮力带来的轻微、有节奏、带点弹性的浮动感——幅度小、速度缓、略带延迟和回弹。
1. 基础浮动动画（垂直位移 + 缓动）
定义一个柔和的上下循环动画，避免生硬线性运动：
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px); /* 向上浮起约 8px，幅度宜小 */
}
}然后应用到小船元素（比如一个 <img alt="H5 中怎么用 @keyframes 实现水面上漂浮的纸小船上下起伏动画" > 或 <div>）：<font color="#666"><pre class='brush:php;toolbar:false;'>.boat {
animation: float 3s ease-in-out infinite;
}</pre></font><p><strong>说明</strong>：
- <code>3s 控制起伏节奏，太短像抖动，太长显呆滞，2.5–4s 较自然；
- ease-in-out 让上升和下降都更柔和，接近真实浮体加减速过程；
- 幅度建议控制在 ±5px ~ ±12px，取决于小船尺寸，大图可稍大，小图标务必微调。
2. 增强真实感：叠加轻微旋转与缩放
真实水面波动中，船体还会随波微微倾斜、略微“呼吸”式缩放。可合并进同一动画：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
@keyframes float-real {
0%, 100% {
transform: translateY(0) rotate(-0.5deg) scale(1.005);
}
25% {
transform: translateY(-6px) rotate(0deg) scale(1);
}
50% {
transform: translateY(-8px) rotate(0.5deg) scale(0.995);
}
75% {
transform: translateY(-4px) rotate(0deg) scale(1);
}
}建议： - 旋转角度控制在 ±0.5° 以内，肉眼不易察觉但能提升质感； - 缩放变化极小（±0.5%），模拟船体受水压微形变； - 各属性变化不同步（比如最高点不一定是最大旋转），避免机械感。
3. 配合水面背景，强化视觉反馈
单靠小船动不够“漂浮”，需搭配水面视觉线索：
- 给容器加浅蓝色渐变背景 + 若隐若现的横向波纹（可用
background-image: radial-gradient或 SVG 波浪图案）； - 小船下方加半透明水花阴影：
box-shadow: 0 6px 12px rgba(100, 149, 237, 0.2)，并随动画轻微模糊/扩散； - 可额外用伪元素（
::after）在船底添加一个缓慢左右晃动的椭圆高光，模拟反光移动。
4. H5 兼容与性能提醒
确保在主流移动端稳定运行：
- 加
-webkit-前缀兼容旧版 Safari/iOS Webview（虽然现代已基本不需要，但保险起见）； - 用
transform和opacity动画，避免触发布局（layout）或绘制（paint），保障 60fps； - 如页面有多个小船，给每个设不同
animation-delay（如0.2s、0.5s），避免同步起伏，更像真实水面。
不复杂但容易忽略——真正“漂浮感”来自克制：少动一点、慢一点、错开一点，比猛加效果更可信。
