X轴无限滚动动画中文字重叠问题求助

我正在设置一个无限滚动动画效果，但添加多行带旋转角度的绿色横幅时，文字总会重叠。只用单个不旋转的横幅时显示正常，搞不懂多横幅旋转后重叠的原因，附上代码示例和截图。

代码示例 #

CSS #

section {
  position: relative;
  width: 100%;
  height: 42%;
  overflow: hidden;
}

section .scroll {
  display: flex;
  background-color: #99e836;
  transform: rotate(-5deg);
  margin: 8rem 0;
  width: 100vw;
  border: 2px solid white;
}

section .scroll div {
  color: white;
  font-size: 4em;
  white-space: nowrap;
  font-weight: 800;
  animation: animate 40s linear infinite;
}

section .scroll div:nth-child(2) {
  animation: animate2 40s linear infinite;
  animation-delay: -20s;
}

section .scroll div span {
  margin: 0 2rem;
}

.transparent {
  color: transparent;
  -webkit-text-stroke-width: 1.3px;
  -webkit-text-stroke-color: blue;
  font-weight: 600;
  &-no {
    color: black;
    font-weight: 500;
  }
}

@keyframes animate {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes animate2 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-200%);
  }
}

section .scroll2 {
  display: flex;
  background-color: #99e836;
  transform: rotate(8deg);
  width: 100vw;
  border: 2px solid white;
  position: absolute;
  top: 7.5rem;
}

section .scroll2 div {
  color: $primary-light;
  font-size: 4em;
  white-space: nowrap;
  font-weight: 800;
  animation: animate 40s linear infinite;
}

section .scroll2 div:nth-child(2) {
  animation: animate2 40s linear infinite;
  animation-delay: -20s;
}

section .scroll2 div span {
  margin: 0 2rem;
}

section .scroll.text1 {
  box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
}

section .scroll2.text2 {
  box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
}

HTML #

<section>
  <div class="scroll text1">
    <div>
      <span class="transparent-no"> Available for Hire</span>
      <span class="transparent"> Available for Hire</span>
      <span class="transparent-no"> Available for Hire</span>
      <span class="transparent"> Available for Hire</span>
    </div>
    <div>
      <span class="transparent-no"> Available for Hire</span>
      <span class="transparent"> Available for Hire</span>
      <span class="transparent-no"> Available for Hire</span>
      <span class="transparent"> Available for Hire</span>
    </div>
  </div>
  <div class="scroll2 text2">
    <div>
      <span class="transparent-no"> Available for Hire</span>
      <span class="transparent"> Available for Hire</span>
      <span class="transparent-no"> Available for Hire</span>
      <span class="transparent"> Available for Hire</span>
    </div>
    <div>
      <span class="transparent-no"> Available for Hire</span>
      <span class="transparent"> Available for Hire</span>
      <span class="transparent-no"> Available for Hire</span>
      <span class="transparent"> Available for Hire</span>
    </div>
  </div>
</section>

问题截图 #

重叠原因 #

• 旋转元素溢出未裁剪：使用transform: rotate()后，元素实际占用空间会超出原始矩形范围，但父容器section的overflow: hidden无法完全裁剪旋转后溢出的部分，导致不同横幅的可视区域重叠。
• 定位间距不合理：.scroll2采用position: absolute+top:7.5rem定位，未考虑.scroll旋转后实际占用的垂直空间，直接导致两个横幅区域重叠。
• 层级关系不明确：两个滚动横幅未设置层级，旋转后堆叠顺序混乱，文字互相覆盖。

修复方法 #

1. 给每个横幅添加独立裁剪容器
   为每个滚动横幅单独嵌套一层容器，设置overflow: hidden和合适高度，确保旋转后的元素不会溢出到其他横幅区域：

   .scroll-container {
     position: relative;
     width: 100%;
     height: 12rem; /* 根据字体大小调整 */
     overflow: hidden;
     margin: 4rem 0;
   }
   

   修改HTML结构：

   <section>
     <div class="scroll-container">
       <div class="scroll text1">...</div>
     </div>
     <div class="scroll-container">
       <div class="scroll2 text2">...</div>
     </div>
   </section>
   

2. 调整定位方式
   删除.scroll2的position: absolute和top属性，让容器通过margin控制间距：

   section .scroll2 {
     display: flex;
     background-color: #99e836;
     transform: rotate(8deg);
     width: 100vw;
     border: 2px solid white;
     /* 移除position和top属性 */
   }
   

3. 明确元素层级
   给两个横幅设置z-index，确保堆叠顺序清晰：

   section .scroll.text1 {
     box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
     z-index: 2;
     position: relative;
   }
   
   section .scroll2.text2 {
     box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
     z-index: 1;
     position: relative;
   }
   

4. 优化容器尺寸
   给.scroll和.scroll2添加padding或调整height，确保旋转后文字不会溢出，同时避免和其他容器重叠：

   section .scroll, section .scroll2 {
     padding: 1rem 0;
     min-height: 10rem; /* 适配字体高度 */
   }
   

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