如何实现雾效背景在X轴上的无缝循环动画（Marquee效果）-html教程-PHP中文网

如何实现雾效背景在X轴上的无缝循环动画（Marquee效果）

本文详解为何 background-size: contain 会破坏 background-repeat: repeat-x 的无缝平铺，以及如何通过移除该属性并配合正确的 CSS 设置，实现真正无限滚动的雾效动画。

本文详解为何 `background-size: contain` 会破坏 `background-repeat: repeat-x` 的无缝平铺，以及如何通过移除该属性并配合正确的 css 设置，实现真正无限滚动的雾效动画。

在实现类似“滚动雾气”（fog marquee）的视觉效果时，核心目标是让一张雾效纹理图像在水平方向（X轴）上无缝、连续、无限重复平铺并平滑移动。你当前的代码已具备基本结构——双图层错位动画、repeat-x 声明、translate3d 关键帧——但效果未达预期，根本原因在于一个看似无害却极具破坏性的 CSS 属性：

? 问题根源：background-size: contain 阻断了重复机制

background-size: contain 的作用是缩放背景图像，使其完整可见于容器内（保持宽高比）。它与 background-repeat 是互斥逻辑：一旦指定了 contain（或 cover、具体像素/百分比），浏览器就不再按“重复单元”来渲染，而是将整张图作为单一实例缩放填充——此时 repeat-x 实际失效，仅剩一次渲染，自然无法形成平铺滚动效果。

Rationale

Rationale 是一款可帮助企业主、经理和个人做出艰难的决定的AI工具

下载

✅ 正确做法：移除 background-size: contain，改用 background-size: auto（默认值）或显式设置为 100% auto / auto 100%，确保图像原始尺寸可被自然重复。

✅ 修复后的关键 CSS（精简优化版）

.fog-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.fog-img-first,
.fog-img-second {
  background-repeat: repeat-x; /* ✅ 允许X轴重复 */
  background-position: top center; /* 推荐设为 top center，避免垂直偏移 */
  /* ⚠️ 移除 background-size: contain; —— 这是关键！ */
  /* 若需控制单个重复单元宽度，可用：background-size: 200px auto; */
}

.fog-img-first {
  background-image: url('fog-1.png');
  animation: marquee 60s linear infinite;
}

.fog-img-second {
  background-image: url('fog-2.png');
  animation: marquee 60s linear infinite;
  animation-delay: -30s; /* 错位启动，消除接缝 */
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-200vw); /* 移动距离 ≥ 2×视口宽度，确保无缝衔接 */
  }
}

? 重要注意事项

translate3d 改为 translateX 更语义清晰：Z轴无变化时，translateX() 足够且更易维护；
双图层错位是无缝滚动的关键：第二层添加 animation-delay: -30s（即提前半周期启动），使两图动画相位差50%，视觉上形成连续流动，避免露出空白间隙；
background-position 建议显式声明：如 top center，防止不同浏览器默认行为差异导致垂直对齐偏移；
图像本身需支持平铺：确保 fog-1.png / fog-2.png 是无缝拼接设计（边缘过渡自然），否则即使CSS正确，也会出现明显接缝；
容器尺寸需明确：.fog-container 和 .fog-img 必须有确定宽高（如 100vh/100vw），避免因父容器塌陷导致渲染异常。