使用css实现无缝循环滚动的新闻播报跑马灯，核心做法是将内容复制一份并拼接在原始内容之后，利用 @keyframes 动画将容器向左平移50%，当第一份内容完全移出视口、第二份内容刚好进入视口时，瞬间重置位置至0，从而形成视觉上的无限循环。具体操作是设置一个包含两份相同内容的父容器，对其应用线性匀速的平移动画，并确保动画时长与滚动距离匹配，这样就能得到一个平滑且无断点的滚动效果。
如何确保滚动过程中没有空白间隙？
要确保滚动过程中没有空白间隙，关键在于内容的宽度计算和动画关键帧的设置。必须保证父容器的总宽度恰好是单份内容宽度的两倍，并且动画的关键帧中，从0%到49.99%阶段，容器向左移动的距离应等于单份内容的宽度（即50%），而在50%时刻瞬间跳回0%。如果只有一份内容，滚动到末尾会出现空白，因此“双份内容”是实现无缝衔接的物理基础。通过这种方式，当用户视线停留在屏幕上时，永远看到的是连续的内容流，而不会察觉到重置动作的发生。
<div class="marquee-container">
<div class="marquee-content">
<span>新闻标题一</span>
<span>新闻标题二</span>
<span>新闻标题三</span>
<!-- 复制一份完全相同的内容 -->
<span>新闻标题一</span>
<span>新闻标题二</span>
<span>新闻标题三</span>
</div>
</div>
<style>
.marquee-container {
overflow: hidden;
white-space: nowrap;
width: 100%;
position: relative;
}
.marquee-content {
display: inline-block;
animation: scroll 10s linear infinite;
}
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
</style>
上述代码中，.marquee-content 包含了两个相同的 序列。动画 scroll 将容器从初始位置 translateX(0) 移动到 translateX(-50%)。由于总宽度是两份内容之和，移动50%正好让第二份内容占据第一份内容原来的位置。此时动画结束并立即重新开始，因为视觉上两者重合，所以用户感知不到跳跃。若需调整速度，只需修改 animation-duration 的值即可。
如何在鼠标悬停时暂停滚动？
在鼠标悬停时暂停滚动，可以通过 CSS 的 :hover 伪类结合 animation-play-state 属性来实现。当用户将鼠标指针移到跑马灯区域上时，触发暂停状态；移开鼠标后，恢复播放。这种交互提升了用户体验，允许用户仔细阅读当前显示的新闻标题。实现时，只需在 .marquee-content 或父容器 .marquee-container 上添加悬停样式，设置 animation-play-state: paused 即可。需要注意的是，暂停时应保持当前的变换状态，而不是重置位置，否则再次恢复时会看到内容突然跳变。
<style>
.marquee-container:hover .marquee-content {
animation-play-state: paused;
}
/* 可选：添加过渡效果使暂停更自然 */
.marquee-content {
transition: none; /* 动画本身不需要transition */
}
/* 如果需要更精细的控制，可以定义变量 */
:root {
--scroll-speed: 10s;
}
.marquee-content {
animation: scroll var(--scroll-speed) linear infinite;
}
.marquee-container:hover .marquee-content {
animation-play-state: paused;
}
</style>
这段代码展示了如何通过悬停事件控制动画状态。当 .marquee-container 被悬停时，其内部的 .marquee-content 动画暂停。由于 animation-play-state 只是暂停而非停止，动画的当前进度会被保留，因此当鼠标移开后，滚动会从暂停的位置继续，不会出现位置跳变。这种方法简单有效，无需 JavaScript 介入，完全由 CSS 驱动。若需支持更复杂的交互，如点击暂停或动态加载内容，则可能需要结合 JS，但对于基本的跑马灯需求，纯 CSS 方案已足够。
当内容高度超过容器时如何处理垂直溢出？
当新闻内容的高度超过容器设定的高度时，默认情况下多余部分会被裁剪，这可能导致文字显示不全。为了解决这个问题，需要明确设置容器的 overflow 属性为 hidden，并确保内部内容块（如 .marquee-content）的高度不超过容器可视区域。如果内容是动态生成的，可能需要通过 JavaScript 动态计算高度并调整容器尺寸。此外，若希望内容在垂直方向也能滚动，可以将水平滚动改为垂直滚动，只需将 translateX 改为 translateY，并将 white-space: nowrap 移除，允许内容换行。但通常跑马灯用于横向展示简短标题，因此建议限制每行内容长度，避免垂直溢出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
