如何实现网页中新闻频道风格的无缝滚动文字效果

使用 css 动画或原生 `` 标签均可实现单行连续滚动文本，但后者更简洁兼容；现代方案推荐用 css `transform` + `animation` 配合 `white-space: nowrap` 和内联容器，避免换行截断，确保多条消息无缝衔接滚动。

要实现“新闻频道风格”的单行无限滚动文字（即所有消息首尾相接、水平匀速滑过），关键在于防止文本自动换行、确保内容在一行内连续排列，并通过动画让整行内容平滑位移。你原始代码的问题在于：.ticker-text span 设置了 display: block，导致每个 独占一行，无法横向拼接；同时未限制父容器内的文本换行行为，造成内容被截断。

✅ 正确做法是：

1. 将所有消息项设为 inline-block 或 inline-flex，使其在同一行内水平排列；
2. 父容器启用 white-space: nowrap，强制子元素不折行；
3. 动画作用于包含全部消息的内层容器（而非每个独立 ），使其整体向左平移；
4. 动画终点需超出左侧边界足够距离，确保末尾消息完全滑出后，开头消息能自然循环出现（可借助 animation-timing-function: linear 与足够长的持续时间保障流畅性）。

以下是推荐的现代纯 CSS 实现（无需 ，语义更优、可控性更强）：

68爱写

专业高质量AI4.0论文写作平台，免费生成大纲，支持无线改稿

下载

  

    new music coming soon!! ★ 
    Next Show: 924 Gilman in Berkeley on June 3rd, 2023 ★ 
    Listen to our latest EP "death, etc" on all streaming platforms!! ★
  

.news-ticker {
  height: 45px;
  width: 940px;
  overflow: hidden;
  background-color: #1a1a1a;
  position: relative;
}

.ticker-content {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-left 25s linear infinite;
  padding-right: 100%; /* 可选：增强循环冗余，避免闪动 */
}

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

/* 基础文本样式 */
.news-ticker span {
  color: #ffffff;
  font-size: 25px;
  line-height: 45px;
  padding: 0 20px;
  display: inline-block;
}

.news-ticker a {
  text-decoration: underline;
  color: #0080FF;
}

⚠️ 注意事项：

• 标签虽能快速实现（如答案中所示），但已废弃（obsolete），不被 HTML5 推荐，缺乏可访问性支持（如屏幕阅读器可能忽略），且难以精准控制速度、暂停交互等；
• 若需响应式适配，建议用 vw 单位替代固定 px 宽度，并配合 @media 调整字体大小与动画时长；
• 为提升性能，避免在动画中触发重排（reflow），务必使用 transform（GPU 加速）而非 left/margin；
• 如需暂停功能（如鼠标悬停暂停），可添加 animation-play-state: paused 的 hover 规则。

总结：抛弃 display: block 和孤立动画，拥抱 white-space: nowrap + inline-block 容器 + transform 动画，即可稳定实现专业级新闻跑马灯效果——简洁、高效、符合现代 Web 标准。