纯CSS可实现云朵飘过太阳并投下动态阴影的H5动画，关键在于分层结构（天空背景、固定太阳、移动云朵）、云朵位移循环动画（ease-in-out缓动、15–30秒时长、left:-100%到100vw）、以及同步移动的遮罩式暗区阴影（clip-path或SVG mask+blur模糊过渡）。
用纯 CSS 和少量 HTML 就能做出云朵飘过太阳、投下动态阴影的 H5 动画，关键在于分层控制 + 位移动画 + 阴影叠加逻辑。不需要 JS，但要注意视觉层级和动画节奏的真实感。
1. 分层结构：太阳、云朵、地面（阴影载体）
必须把太阳、云朵、投影面（比如天空背景或地面区域）拆成三个独立图层：
- 最底层：一个浅蓝或渐变的天空背景（可加轻微噪点提升质感）
-
中间层：一个固定不动的黄色圆形代表太阳（建议用
radial-gradient模拟光晕） - 最上层：半透明云朵 SVG 或 PNG（推荐 SVG，支持矢量缩放和滤镜）
注意：云朵本身不加阴影，而是通过 clip-path 或遮罩方式，在“下方一层”（比如天空背景上）模拟出随云移动的暗区——这才是阴影的实质。
2. 云朵动画：平滑位移 + 缓动 + 循环
给云朵容器设置从左到右（或右到左）的连续位移动画，用 animation-timing-function: ease-in-out 模拟自然飘动节奏：
- 动画时长建议 15–30 秒，太短显突兀，太长缺乏动感
- 起始位置设为
left: -100%;，结束为left: 100vw;，确保无缝穿出屏幕 - 加
animation-iteration-count: infinite;实现循环，多朵云可用不同时长/延迟错开，增强真实感
3. 阴影效果：不是 box-shadow，而是“遮罩式暗区”
直接对云加 box-shadow 会显得像云在发光，不符合“遮挡阳光”的物理逻辑。更真实的做法是：
- 在太阳图层下方、天空背景上方，加一个与云朵形状一致的半透明黑色椭圆/不规则蒙版（可用 SVG
<mask>或 CSSclip-path+opacity: 0.15–0.25） - 让这个“暗区”和云朵使用同一套动画参数（相同
animation-name、duration、delay），保持严格同步 - 暗区边缘加轻微模糊（
filter: blur(4px);）模拟散射光过渡，避免生硬黑边
4. 提升真实感的细节技巧
真正让动画“逼真”的不是复杂度，而是这些小处理：
- 云朵用多层 SVG（远/中/近三层），每层速度略有差异（视差滚动），例如近层快 1.2×，远层慢 0.8×
- 太阳光晕加轻微呼吸动画（
transform: scale(0.98, 1.02);循环 8s，幅度极小） - 整个天空背景加
background-attachment: fixed;（若页面可滚动），强化景深 - 在移动端加
@media (prefers-reduced-motion: reduce)关闭动画，兼顾无障碍
不复杂但容易忽略。核心就三点：分层、同步、软过渡。做好这三步，云影掠日的效果就很自然了。
