如何让CSS实现的marquee跑马灯效果铺满全屏且无滚动条

直接对原有代码做少量调整即可满足需求，不需要改动核心跑马灯动画逻辑，调整后可实现图片占满1080×1920竖屏区域、窗口无任何滚动条的效果。

调整后的完整代码 #

HTML部分 #

原有代码缺少视口适配标签，会导致尺寸显示异常，补全后代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <div class="container">
    <div class="scrolling">
      <img src="Sports_Background_3_proper2.png" height="1920">
    </div>
    <div class="scrolling" aria-hidden="true">
      <img src="Sports_Background_3_proper2.png" height="1920">
    </div>
    <div class="scrolling" aria-hidden="true">
      <img src="Sports_Background_3_proper2.png" height="1920">
    </div>
    <div class="scrolling" aria-hidden="true">
      <img src="Sports_Background_3_proper2.png" height="1920">
    </div>
    <!-- … -->
  </div>
</body>
</html>

CSS部分 #

替换你原有CSS代码即可，核心调整如下：

• 全局清除默认内外边距，锁死滚动条，避免窗口出现多余滚动条
• 容器撑满整个竖屏视口，刚好匹配1080×1920的显示尺寸
• 清除inline-block元素的默认排列缝隙，避免滚动衔接处出现断档
• 图片高度自适应屏幕，宽度按原比例自动计算，不会拉伸变形

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  white-space: nowrap;
}

.scrolling {
  animation: marquee 25s linear infinite;
  padding-right: 0;
  display: inline-block;
  height: 100%;
  font-size: 0;
}

.scrolling img {
  height: 100%;
  width: auto;
  display: block;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

注意事项 #

• 如果只需要在固定1080×1920分辨率的设备上展示，不需要适配其他尺寸，可以把CSS中的100vw替换为1080px、100vh替换为1920px，显示精度更高
• 只要保证滚动容器内至少有2份完全相同的长图，原有动画就能实现无缝循环滚动，不需要修改动画参数
• 所有默认边距、元素缝隙都已通过样式清除，不会出现内容溢出或者留黑边的问题

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