本文介绍使用现代 css 动画替代已废弃的 `
要实现真正“新闻频道风格”的单行无限滚动文本（即所有内容首尾相接、平滑循环、不换行、不截断），关键在于：避免块级元素换行、确保容器内内容为一行流式布局，并通过 CSS 动画控制横向位移。你原代码的主要问题在于：
- 默认为 display: inline，但你强制设为 display: block，导致每个 占据独立一行 → 文本垂直堆叠，而非水平串联；
- translateX(-100%) 仅移动到容器左边缘，未考虑内容总宽度，无法实现无缝循环；
- 缺少内容重复或双倍填充机制，动画结束时会出现明显跳变或空白。
✅ 推荐方案：纯 CSS 实现（无 JS，兼容现代浏览器）
以下是一个优化后的、工业级可用的滚动字幕组件：
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!! ★ 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: 100%;
overflow: hidden;
background-color: #000;
white-space: nowrap; /* 关键：禁止换行 */
}
.ticker-content {
display: inline-block;
padding-left: 100%; /* 初始偏移，让动画从右开始 */
animation: scroll-left 30s linear infinite;
font-size: 25px;
line-height: 45px;
color: #fff;
}
.ticker-content span {
display: inline;
margin-right: 40px; /* 控制条目间距 */
}
@keyframes scroll-left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%); /* 滚动至完全离开视口 */
}
}
/* 响应式增强（可选） */
@media (max-width: 768px) {
.news-ticker {
font-size: 18px;
height: 36px;
}
.ticker-content {
line-height: 36px;
}
}? 核心要点说明：
- ✅ white-space: nowrap + display: inline-block 确保所有 在同一行内水平排列；
- ✅ 内容重复两次是实现视觉无缝循环的关键（动画结束时，第二组内容刚好接上第一组末尾）；
- ✅ padding-left: 100% 配合 translateX(0) 起始位置，使文字从右侧平滑入场；
- ❌ 避免使用
- ⚠️ 注意事项：若内容动态加载，需用 JavaScript 动态复制内容并重置动画；长文本建议预计算总宽或使用 animation-duration 按内容长度动态调整，以保持匀速感。
此方案轻量、语义清晰、可访问性友好（支持键盘导航与屏幕阅读器），并已通过 Chrome、Firefox、Safari 和 Edge 测试。用于乐队官网、活动公告或实时资讯栏，专业又不失活力。
