云朵飘移背景特效（纯 CSS 云朵动画，昼夜模式可切换）

效果演示（真实可交互）

一片渐变蓝的天空上，几朵白云从左侧缓缓飘向右方，每朵云的尺寸、高度、速度和入场时间都各不相同，错落有致。点「切换夜晚」按钮，天空会在 1.2 秒内过渡为深蓝夜色：太阳淡出、月亮亮起、星星开始闪烁，云朵也随之变为暗色剪影。拖动「飘移速度」可以让云朵加速或几乎静止，「云朵数量」控制同时飘移的云数（1-8 朵）。云的造型完全由 CSS 实现——一个圆角矩形主体加两个 ::before/::after 圆形凸起拼成，不依赖任何图片素材。

完整代码

<div class="sky">
  <div class="stars"></div>
  <div class="sun"></div>
  <div class="moon"></div>
  <div class="clouds">
    <div class="cloud" style="--top:18%;--scale:1.1;--dur:32s;--delay:-8s"></div>
    <div class="cloud" style="--top:42%;--scale:.7;--dur:22s;--delay:-14s"></div>
    <div class="cloud" style="--top:62%;--scale:1.3;--dur:40s;--delay:-26s"></div>
  </div>
</div>

.sky {
  position: relative; width: 100%; height: 340px; overflow: hidden;
  background: linear-gradient(180deg, #7ec8f7, #cfe9fb 55%, #f5f9fd);
  transition: background 1.2s ease;
}
.sky.night { background: linear-gradient(180deg, #0b1030, #1a2350 55%, #2a3560); }

.stars { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s;
  background-image: radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 45% 18%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 76% 24%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 55% 38%, #fff, transparent);
  animation: twinkle 3.2s ease-in-out infinite; }
.sky.night .stars { opacity: 1; }
@keyframes twinkle { 0%,100% { opacity: 0; } 50% { opacity: 1; } }

.sun { position: absolute; right: 12%; top: 14%; width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff3c4, #ffd76a 60%, #ffb84d);
  box-shadow: 0 0 40px 10px rgba(255,215,106,.45);
  transition: opacity 1.2s; }
.sky.night .sun { opacity: 0; }
.moon { position: absolute; right: 12%; top: 14%; width: 46px; height: 46px; border-radius: 50%;
  background: #e8ecf5; box-shadow: 0 0 30px 8px rgba(220,230,255,.35);
  opacity: 0; transition: opacity 1.2s; }
.sky.night .moon { opacity: 1; }

.cloud { position: absolute; left: -220px; top: var(--top, 20%);
  width: 120px; height: 34px; border-radius: 40px;
  background: rgba(255,255,255,.92); opacity: .92;
  transform: scale(var(--scale, 1));
  animation: cloudDrift var(--dur, 30s) linear infinite;
  animation-delay: var(--delay, 0s); }
.cloud::before, .cloud::after { content: ''; position: absolute; background: inherit; border-radius: 50%; }
.cloud::before { width: 44px; height: 44px; top: -22px; left: 18px; }
.cloud::after  { width: 30px; height: 30px; top: -14px; left: 56px; }
.sky.night .cloud { background: rgba(196, 208, 230, .5); }

@keyframes cloudDrift {
  from { transform: translateX(0) scale(var(--scale, 1)); }
  to   { transform: translateX(calc(100vw + 440px)) scale(var(--scale, 1)); }
}

// 动态生成云朵（演示面板逻辑）：数量 + 速度
const layer = document.querySelector('.clouds');
const cfg = { speed: 8, count: 5 };
function makeCloud() {
  const el = document.createElement('div');
  el.className = 'cloud';
  el.style.setProperty('--top', `${5 + Math.random() * 60}%`);
  el.style.setProperty('--scale', (0.6 + Math.random() * 0.7).toFixed(2));
  const base = 14 + Math.random() * 22;      // 每朵基准时长
  el.dataset.base = base;
  el.style.setProperty('--dur', `${base / cfg.speed * 8}s`);
  el.style.setProperty('--delay', `${-(Math.random() * base / cfg.speed * 8)}s`);
  layer.appendChild(el);
}
function applyCount() {
  while (layer.children.length < cfg.count) makeCloud();
  while (layer.children.length > cfg.count) layer.lastChild.remove();
}
function applySpeed() {
  layer.querySelectorAll('.cloud').forEach(el =>
    el.style.setProperty('--dur', `${el.dataset.base / cfg.speed * 8}s`));
}
applyCount();

参数说明

兼容性与性能

• 云朵动画只使用 transform（translateX/scale），由合成器线程处理，不会触发重排；负值 animation-delay 是标准特性，所有现代浏览器支持。
• 使用 CSS 变量（--top/--scale/--dur/--delay）管理每朵云的差异，JS 只需改变量，无需重建节点。
• 星星用多层 radial-gradient 背景模拟，零 DOM 节点；需要更多星星时继续叠加 gradient 层即可。
• 昼夜过渡只改 background 与 opacity，均为 GPU 友好属性，1.2s 过渡顺滑。
• 云朵数量默认 5 朵，DOM 开销可忽略；对 prefers-reduced-motion 用户可停用 cloudDrift 动画，保留静态天空。

常见问题

Q: 云朵飘出画面后去哪了？ 动画 to 的位移量为 100vw + 440px，保证云完全移出可视区域；由于动画是无限循环且设置了负延迟，新的一朵会立即从左侧重新入场，视觉上连绵不断。

Q: 为什么我的云看起来是”方块”而不是圆滚滚的？ 云由主体圆角矩形 + 两个圆形伪元素组成，三者背景同色（background: inherit）才拼得自然。若伪元素没生效，检查是否误删了 ::before/::after 的 content: ''。

Q: 想让云朵有层次感（近大远小）？ 利用 --scale 即可：近处云 scale 大、--top 偏低且速度更快（base 更小），远处云反之，立刻产生纵深感。

Q: 昼夜切换时文字看不清？ 把文字放在 .sky-tip 同级容器并跟随 .sky.night 切换颜色；深色文字在夜色下会看不清，建议像示例那样同时提供明暗两套配色。