CSS实现文字跑马灯效果教程

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《CSS文字跑马灯效果实现方法》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

使用CSS的@keyframes和transform: translateX()可实现高性能跑马灯效果，通过overflow: hidden隐藏溢出内容，white-space: nowrap防止换行，结合animation实现从右向左的连续滚动；进阶方案可通过双倍文本配合translateX(-50%)实现无缝滚动，适用于通知栏、榜单等场景，无需JavaScript即可完成。

要实现文字滚动的跑马灯效果，可以使用 CSS 的 @keyframes 和 transform: translateX() 配合完成。这种方式性能好、兼容性高，适合在 banner、通知栏、榜单等场景中使用。

基本原理

通过定义关键帧动画，让文本容器从右向左平移（或反之），实现连续滚动的效果。核心是利用 translateX 控制元素水平位移，并结合容器的溢出隐藏（overflow: hidden）来制造“跑动”的视觉感。

HTML 结构

<div class="marquee-container">
  <div class="marquee-text">
    欢迎访问我们的网站！最新活动火热进行中，点击了解更多详情……
  </div>
</div>

CSS 样式与动画实现

设置外层容器限制宽度并隐藏溢出，内层文本设置白空间不换行，并通过 keyframes 定义从右到左的平移动画。

.marquee-container {
  width: 100%;
  max-width: 800px;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 4px;
}
<p>.marquee-text {
display: inline-block;
font-size: 18px;
color: #333;
animation: marqueeAnimation 10s linear infinite;
}</p><p>@keyframes marqueeAnimation {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}</p>

关键点说明

• overflow: hidden：确保文本超出容器的部分被隐藏，形成“进入/离开”视觉效果。
• white-space: nowrap：防止文本自动换行，保持一行显示。
• display: inline-block：使文本内容可被整体移动。
• translateX(100%) → translateX(-100%)：从右侧完全进入，移动到左侧完全离开。
• animation-timing-function: linear：保证滚动速度均匀。
• infinite：实现无限循环滚动。

进阶优化：无缝滚动

如果希望实现更平滑的无缝滚动（比如文本重复出现），可以通过复制内容或使用伪元素扩展长度，再调整动画距离。

/* 示例：双倍文本无缝滚动 */
.marquee-text {
  animation: marqueeSmooth 12s linear infinite;
  white-space: nowrap;
}
<p>@keyframes marqueeSmooth {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}</p><p>/<em> 需配合将内容重复一次，或用 JS 动态生成双倍宽度 </em>/</p>

基本上就这些。使用 keyframes 和 translateX 实现跑马灯简单高效，无需 JavaScript，适合大多数静态滚动需求。注意控制动画时长以适应文本长度，避免过快或过慢影响阅读体验。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。