求助：雾覆盖层无法在X轴循环实现Marquee动画

核心问题分析 #

1. 背景重复属性被覆盖：background-repeat: repeat-x写在background简写属性之前，而background会重置所有背景相关属性，导致横向重复不生效。
2. 动画位移逻辑错误：当前动画终点位移-200vw，但元素宽度仅为100vw，无法形成无缝循环的衔接。
3. 背景尺寸适配问题：background-size: contain可能导致雾图被拉伸或压缩，破坏重复的连续性。

修复后的代码 #

CSS 修改

html {
  position: relative;
  margin: 0;
  padding: 0;
}

.fog {
  position: relative;
  height: 100vh;
  width: 100%;
}

.absolute-bg {
  overflow: hidden;
}

.fog-container {
  top: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.fog-img {
  position: absolute;
  height: 100vh;
  /* 设为200vw确保背景图重复后能覆盖容器，实现无缝循环 */
  width: 200vw;
  z-index: 2;
}

.fog-img-first {
  /* 先写background简写，再单独设置repeat-x，避免被覆盖 */
  background: url(fog-1.png) center / auto 100% no-repeat;
  background-repeat: repeat-x;
  animation: marquee 60s linear infinite;
}

.fog-img-second {
  background: url(fog-2.png) center / auto 100% no-repeat;
  background-repeat: repeat-x;
  /* 给第二个雾层设置延迟，形成错落感 */
  animation: marquee 60s linear infinite 15s;
}

@keyframes marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  /* 位移量等于元素宽度的一半（100vw），刚好让末尾的背景图衔接起始位置 */
  100% {
    transform: translate3d(-100vw, 0, 0);
  }
}

body {
  background-color: black;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#homescreen {
  width: 100vw;
  height: 100vh;
  background-image: url(main-background.png);
  background-size: cover;
  background-color: black;
  overflow: hidden;
}

HTML 保持不变

<div id="homescreen">
  <section class="fog">
    <div class="absolute-bg">
      <div class="fog-container">
        <div class="fog-img fog-img-first"></div>
        <div class="fog-img fog-img-second"></div>
      </div>
      <br>
      <img src="logo v3.png" class="logo"><br>
      <div id="buttonsDiv">
        <button class="menuButtons" onclick="fadeOut(homeScreen)">PLAY</button>&nbsp
        <button class="menuButtons">SETTINGS</button><br>
        <button class="menuButtons">CREDITS</button><br>
      </div>
    </div>
  </section>
</div>

关键修改说明 #

• 调整背景属性顺序：将background简写放在前面，再单独声明background-repeat: repeat-x，确保横向重复生效。
• 修改元素宽度与动画位移：把.fog-img宽度设为200vw，动画终点位移-100vw，这样当元素向左移动100vw时，原本右侧的背景图会刚好衔接左侧起始位置，实现无缝循环。
• 优化背景尺寸：用auto 100%替代contain，保证雾图高度铺满容器的同时，宽度保持原始比例，避免拉伸导致重复衔接断裂。
• 添加动画延迟：给第二个雾层设置15秒延迟，让两层雾的运动错落，更贴近真实效果。

内容的提问来源于stack exchange，提问作者Scarrelux