如何实现无缝无限横向滚动新闻栏（CSS 动画方案）-html教程-PHP中文网

如何实现无缝无限横向滚动新闻栏（CSS 动画方案）

本文介绍一种纯 CSS 实现的无缝无限横向滚动新闻栏方法，通过优化 flex 布局与 transform 动画关键帧，消除滚动间隙，提升视觉连贯性，并支持鼠标悬停暂停功能。

本文介绍一种纯 css 实现的无缝无限横向滚动新闻栏方法，通过优化 `flex` 布局与 `transform` 动画关键帧，消除滚动间隙，提升视觉连贯性，并支持鼠标悬停暂停功能。

要实现真正平滑、无缝、无限循环的横向新闻滚动效果，仅靠基础的 translateX(100%) → translateX(-100%) 动画是不够的——原代码中动画从右边界完全移出到左边界重新出现，中间存在明显空白期，导致“断连感”。核心优化在于两点：布局逻辑重构与动画节奏微调。

✅ 关键改进点解析

将 <ul></ul> 设为 display: flex 并启用 justify-content: space-between
此举使所有 <li> 元素均匀分布于容器内，配合 white-space: nowrap 防止换行，确保内容在单行内完整铺开，为连续位移提供物理基础。
缩短动画周期并确保起止位置精准衔接
将 animation-duration 从 20s 缩至 10s（可根据内容密度调整），同时保持 0% { transform: translateX(100%) } 和 100% { transform: translateX(-100%) } 不变——这意味着元素从完全右侧进入，到完全左侧退出，全程覆盖整个视口宽度的 200%，从而天然形成“首尾相接”的错觉。
保留交互友好性
:hover { animation-play-state: paused } 仍有效，用户可随时暂停查看新闻标题，提升可用性。

CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

? 完整可运行代码示例

<div class="banner">
  <div class="image">
    @@##@@
  </div>
  <div class="notices">
    <ul>
<li>Notice one</li>
      <li>Notice two</li>
      <li>Notice three</li>
      <li>Notice four</li>
      <li>Notice five</li>
    </ul>
</div>
</div>

.banner {
  display: flex;
  align-items: center;
  background-color: #1E90FF;
  padding: 4px 0 4px 4px;
}

.image img {
  max-width: 240px;
  max-height: 120px;
  height: auto;
  margin-right: 20px;
  margin-left: 20px;
}

.notices {
  overflow: hidden;
  background-color: white;
  padding: 10px;
  flex-grow: 1;
}

.notices ul {
  list-style: none;
  padding: 0;
  margin: 0;
  white-space: nowrap;
  font-size: xx-large;
  animation: moveNotices 10s linear infinite;
  display: flex;
  justify-content: space-between; /* ? 核心修复：消除间隙 */
}

.notices ul:hover {
  animation-play-state: paused;
}

.notices ul li {
  display: inline-block;
  margin-right: 10px;
  padding-right: 10px;
  border-right: 4px solid #ccc;
  cursor: pointer;
}

.notices ul li:last-child {
  border-right: none;
}

@keyframes moveNotices {
  0% {
    transform: translateX(100%); /* 从右侧完全进入 */
  }
  100% {
    transform: translateX(-100%); /* 向左完全移出 */
  }
}

⚠️ 注意事项与进阶建议

内容长度适配：若新闻条目过多或过长，可能导致单次动画时间内位移过快/过慢，建议根据 ul 总宽度动态调整 animation-duration（例如：总宽 ≈ 1200px → 12s 较舒适）。
响应式兼容：在移动端需添加 @media 查询限制字体大小与间距，避免溢出；也可考虑用 vw 单位替代固定 px 值。
无障碍增强：为 <li> 添加 aria-label，并确保焦点可访问（如支持键盘 Tab 导航）。
性能提示：transform 属于 GPU 加速属性，本方案性能优异；避免对 left/top 或 margin 等触发重排的属性做动画。