本文介绍如何通过纯 css 实现平滑、无缝的横向无限新闻滚动效果，解决原方案中动画间隙大、视觉断连的问题，关键在于调整容器布局模式与动画范围控制。
本文介绍如何通过纯 css 实现平滑、无缝的横向无限新闻滚动效果，解决原方案中动画间隙大、视觉断连的问题，关键在于调整容器布局模式与动画范围控制。
要构建一个真正“无限循环”的水平新闻滚动栏（Scroller infinite horizontal），仅靠 translateX(100%) → translateX(-100%) 的线性位移是不够的——它会导致内容完全移出视口后才重新从右侧进入，产生明显空白期。核心优化思路是：让列表项在视觉上首尾相接，并利用 Flex 布局 + 精确动画范围消除过渡间隙。
✅ 关键改进点解析
启用
display: flex+justify-content: space-between
将<ul></ul>设为弹性容器，使<li>元素均匀分布。这不仅提升排版可控性，更重要的是：当元素宽度固定、间距一致时，translateX(-100%)恰好将第一个元素推至视口最左端，而最后一个元素刚好补位到最右端，形成视觉连续性。缩短动画周期并确保位移精准
原代码中animation: moveNotices 20s过长，且100%位移量未考虑内容总宽度。优化后设为10s，配合translateX(100%)→translateX(-100%)，实际位移量等于整个容器宽度（即100vw），而非子项总宽，从而保证匀速、无抖动滚动。保留交互友好性
通过:hover { animation-play-state: paused }实现悬停暂停，提升用户体验；同时去除冗余white-space: nowrap（Flex 已天然防止换行），语义更清晰。
✅ 完整可运行代码示例
.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;
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%);
}
}<div class="banner">
<div class="image">
<img src="https://img.freepik.com/vector-premium/concepto-noticias-mundiales-ilustracion-globo-vectorial-tema-periodistico-noticias-vivo_570429-18111.jpg" alt="News banner icon">
</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>⚠️ 注意事项与进阶建议
-
响应式适配：若需适配小屏幕，建议配合媒体查询动态调整
font-size和margin-right，避免文字溢出。 -
性能提示：
transform属于硬件加速属性，本方案已天然具备良好性能；避免在动画中修改width、height或margin等触发布局重排的属性。 -
无限滚动增强（可选）：如需更长周期或更高容错性（例如动态增删新闻），可借助 JavaScript 克隆节点并拼接双份数据（如
li * 2），再用translateX(-50%)实现无缝循环——但纯 CSS 方案对静态内容已足够高效简洁。
通过以上优化，新闻栏将实现真正流畅、无停顿、可交互的无限水平滚动效果，兼顾可维护性与视觉专业性。
