云上传加载动画（Cloud Upload Loader 箭头穿云）

效果演示（真实可交互）

白色云朵悬浮在渐变天空上，上传箭头从云底升起、穿入云中后淡出，三个数据小点错峰上升汇入云朵，完整呈现”文件上传”的过程语义。白天 / 夜间场景一键切换。

完整代码

HTML 结构：

<div class="cu-cloud">
  <span class="cu-arrow">↑</span>      <!-- 上传箭头 -->
  <span class="cu-dot d1"></span>      <!-- 数据小点 ×3 -->
  <span class="cu-dot d2"></span>
  <span class="cu-dot d3"></span>
</div>

CSS 核心：

/* 云朵：主圆角矩形 + 两个伪元素圆，免去多余 DOM */
.cu-cloud {
  position: relative; width: 150px; height: 48px;
  border-radius: 26px; background: #fff;
  box-shadow: 0 10px 24px rgba(60,90,160,.16);
}
.cu-cloud::before { content: ''; position: absolute; width: 56px; height: 56px;
                    top: -26px; left: 24px; border-radius: 50%; background: #fff; }
.cu-cloud::after  { content: ''; position: absolute; width: 38px; height: 38px;
                    top: -16px; left: 74px; border-radius: 50%; background: #fff; }

/* 箭头：从云底下方 46px 升到云内 -10px，全程淡入淡出 */
.cu-arrow { position: absolute; left: 50%; top: 16px; margin-left: -14px;
            font-size: 20px; font-weight: 700; color: #4f8cff;
            animation: cu-rise 2.2s ease-in-out infinite; }
@keyframes cu-rise {
  0%   { transform: translateY(46px); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(-10px); opacity: 0; }
}

/* 数据小点：错峰上升，视觉上"排队上传" */
.cu-dot { position: absolute; left: 50%; width: 8px; height: 8px;
          border-radius: 50%; background: #7ab8ff; opacity: 0; }
.cu-dot.d1 { margin-left: -26px; bottom: -14px; animation: cu-rise-dot 2.2s ease-in-out infinite; }
.cu-dot.d2 { margin-left: 6px;   bottom: -14px; animation: cu-rise-dot 2.2s ease-in-out .4s infinite; }
.cu-dot.d3 { margin-left: 24px;  bottom: -14px; animation: cu-rise-dot 2.2s ease-in-out .8s infinite; }
@keyframes cu-rise-dot {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translateY(-74px) scale(1); opacity: 0; }
}

参数说明

兼容性与性能

• 箭头与小点只动 transform 和 opacity，GPU 合成层动画，不触发重排
• 云朵仅 1 个节点 + 2 个伪元素，全组件共 4 个动画实例，开销极小
• 兼容 Chrome / Firefox / Safari / Edge 最新版；伪元素圆要求现代浏览器，均满足
• 夜间场景使用深色云朵与浅色箭头，注意对比度；小点颜色可随场景变量统一换色
• 适合文件上传、图片压缩、网盘同步、附件发送等场景，云 + 箭头的组合语义一目了然

常见问题

Q: 箭头上升到一半就消失了？ 检查 cu-rise 的终点 translateY 是否小于箭头顶部位置，且容器（.cu-scene）没有 overflow: hidden 截断；云朵本身 z-index 高于箭头时也会遮挡。

Q: 想让云朵也缓慢飘动？ 给 .cu-cloud 外层再包一层，加 animation: cu-drift（小幅 translateX 来回）即可，与上传动画互不干扰。

Q: 换 Logo 或品牌图形怎么办？ 把 .cu-arrow 的内容替换成你自己的 SVG/图标，cu-rise 动画完全复用，只需调整图标尺寸与颜色。

Q: 夜间模式小点看不清？ 把 --cu-dot 换为更亮的颜色（如 #8fb4ff），或给小点加 box-shadow: 0 0 8px 发光，深色底上会更明显。