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

使用 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 实现（无需 ，语义更优、可控性更强）：

   
     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 标准。