如何解决CSS乒乓动效轮播图的overflow溢出隐藏问题？

问题原因 #

你把overflow: hidden加在了动画容器.carroussel-pelis上，但这个元素是被transform平移的对象，需要容纳所有图片的总宽度，而父容器.carroussel-container未设置溢出隐藏，导致超出的图片无法被裁切。同时.carroussel-pelis设置width: 100vw会限制自身宽度，无法完整容纳所有图片，进一步加剧了溢出问题。

修复方案 #

1. 将溢出隐藏移到父容器：给.carroussel-container添加overflow: hidden，让它作为可视区域的裁切边界。
2. 调整动画容器宽度：把.carroussel-pelis的width: 100vw改为width: auto，让flex布局自动计算所有子元素的总宽度，确保平移动画能正常往返。
3. 优化动画平移值：使用自适应计算代替固定像素值，确保50%关键帧时刚好滑到最左侧边缘。

修改后的完整代码 #

CSS部分

.carroussel-container {
  width: 100%;
  overflow: hidden; /* 关键：父容器设置溢出隐藏 */
}

.carroussel-pelis {
  animation: carousel 100s linear infinite;
  display: flex;
  flex-wrap: nowrap;
  width: auto; /* 让容器自适应内容总宽度 */
}

.carroussel-elemento {
  flex-shrink: 0;
  width: 250px;
  margin-right: 20px;
}

.carroussel-elemento>a>img {
  width: 250px;
  height: 350px;
  border: 1px solid red;
}

@keyframes carousel {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    /* 自适应计算平移距离，确保滑到最左侧时刚好显示边缘 */
    transform: translate3d(calc(-100% + 100vw), 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

HTML部分（无需修改）

<div class="carroussel-container">
  <div class="carroussel-pelis">
    <div class="carroussel-elemento">
      <a href="xxx"><img src="xxx"></a>
    </div>
    <div class="carroussel-elemento">
      <a href="xxx"><img src="xxx"></a>
    </div>
    <div class="carroussel-elemento">
      <a href="xxx"><img src="xxx"></a>
    </div>
    <div class="carroussel-elemento">
      <a href="xxx"><img src="xxx"></a>
    </div>
    <div class="carroussel-elemento">
      <a href="xxx"><img src="xxx"></a>
    </div>
    <div class="carroussel-elemento">
      <a href="xxx"><img src="xxx"></a>
    </div>
  </div>
</div>

额外说明 #

• 使用calc(-100% + 100vw)可以让动画自适应不同屏幕宽度，无需手动计算固定像素值，确保在任何设备上都能实现完整的往返滑动且溢出部分被隐藏。
• 若.carroussel-container有padding或margin，需要调整calc中的数值，保证容器可视区域的准确性。

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