CSS怎样制作跑马灯效果？marquee替代方案

现代web开发中实现跑马灯效果最推荐使用css的@keyframes规则配合animation属性；1. 通过定义@keyframes创建动画关键帧，并用animation应用，实现如文字或图片的移动；2. 为实现无缝循环，需在html中复制滚动内容，并在css中让滚动容器移动自身宽度的一半（如translatex(-50%)），使内容接续呈现；3. 该方法适用于文本、图片或复杂布局，只需将内容置于动画元素内，并用flex布局确保水平排列；4. 可通过animation-play-state控制暂停（如:hover时paused），调整animation-duration改变速度，以及修改transform值或使用animation-direction来改变滚动方向。

跑马灯效果，也就是我们常说的文字或图片滚动，在现代Web开发中，最推荐且主流的做法是利用CSS的

@keyframes

animation

<marquee>

解决方案

要用CSS制作跑马灯效果，核心就是定义一个关键帧动画，让元素在指定的时间内从一个位置移动到另一个位置。

我们先来构建一个基本的HTML结构：

立即学习“前端免费学习笔记（深入）”；

<div class="marquee-container">
  <p class="marquee-content">这是一段滚动的新闻公告，内容会持续向左滚动，循环播放。欢迎关注我们的最新动态！</p>
</div>

接着，是关键的CSS部分。这里我们定义一个名为

scroll-left

marquee-content

.marquee-container {
  width: 100%; /* 容器宽度，可根据需要调整 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  white-space: nowrap; /* 确保内容不换行 */
  box-sizing: border-box; /* 盒模型设置 */
  border: 1px solid #eee; /* 示例边框 */
  padding: 10px;
  background-color: #f9f9f9;
}

.marquee-content {
  display: inline-block; /* 确保内容可以水平滚动 */
  padding-left: 100%; /* 让内容从容器右侧完全进入 */
  animation: scroll-left 15s linear infinite; /* 应用动画 */
}

/* 定义关键帧动画 */
@keyframes scroll-left {
  0% {
    transform: translateX(0%); /* 动画开始时在原始位置 */
  }
  100% {
    transform: translateX(-100%); /* 动画结束时向左移动自身宽度的100% */
  }
}

这段代码实现的是内容从右侧进入，向左滚动，直到完全消失。

padding-left: 100%;

transform: translateX(-100%);

CSS跑马灯效果如何实现无缝循环滚动？

实现无缝循环滚动，其实是很多开发者在刚开始用CSS动画做跑马灯时会遇到的一个“坑”。你可能会发现，内容滚完一次后，会有个明显的空白期，然后才重新出现。这在用户体验上是很糟糕的。

解决这个问题的常用方法是复制滚动内容。想象一下，你有一段文字A，当它滚动到快要消失的时候，文字A的副本（文字A'）已经紧随其后开始进入视线，这样当文字A完全消失时，文字A'正好填补了空白，实现了视觉上的无缝衔接。

具体做法是在HTML中将需要滚动的实际内容复制一份或多份，并放在同一个滚动元素内。

<div class="marquee-container">
  <div class="marquee-content-wrapper">
    <p class="marquee-content-item">这是一段滚动的新闻公告，内容会持续向左滚动，循环播放。欢迎关注我们的最新动态！</p>
    <p class="marquee-content-item">这是一段滚动的新闻公告，内容会持续向左滚动，循环播放。欢迎关注我们的最新动态！</p>
    <!-- 如果内容很短，可能需要更多副本 -->
  </div>
</div>

CSS部分则需要做一些调整，让

marquee-content-wrapper

.marquee-container {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid #eee;
  padding: 10px;
  background-color: #f9f9f9;
}

.marquee-content-wrapper {
  display: flex; /* 使用Flexbox让内容项水平排列 */
  white-space: nowrap; /* 防止内容项内部文本换行 */
  animation: scroll-seamless 15s linear infinite; /* 应用无缝滚动动画 */
}

.marquee-content-item {
  flex-shrink: 0; /* 防止内容项被压缩 */
  padding-right: 20px; /* 内容项之间的间距 */
  /* 其他样式，如字体大小、颜色等 */
}

@keyframes scroll-seamless {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 关键：移动的距离是单份内容的宽度，或者说是总内容的一半宽度 */
    /* 假设有两份完全相同的内容，总宽度是内容宽度的两倍，移动一半总宽度就是移动一份内容的宽度 */
    transform: translateX(-50%); 
  }
}

这里的

translateX(-50%)

marquee-content-wrapper

marquee-content-wrapper

marquee-content-item

item

item

@keyframes

translateX

除了文本，CSS跑马灯还能滚动图片或复杂布局吗？

当然可以！CSS动画的强大之处就在于它作用于元素本身，而不管元素里面承载的是什么内容。无论是文本、图片、图标，甚至是更复杂的卡片式布局，只要它们被包含在那个进行动画的元素（例如我们上面例子中的

.marquee-content

.marquee-content-wrapper

In3D

把真人变成化身，创建逼真且可自定义的虚拟角色

下载

想象一下一个新闻网站的顶部滚动条，里面可能不仅有标题，还有小缩略图、发布日期等。你完全可以将这些元素组织在一个

div

div

例如，如果你想滚动一组图片：

<div class="marquee-container">
  <div class="marquee-gallery-wrapper">
    <img src="image1.jpg" alt="图片1" class="gallery-item">
    <img src="image2.jpg" alt="图片2" class="gallery-item">
    <img src="image3.jpg" alt="图片3" class="gallery-item">
    <!-- 更多图片，为了无缝滚动可能需要重复图片 -->
    <img src="image1.jpg" alt="图片1" class="gallery-item"> 
    <img src="image2.jpg" alt="图片2" class="gallery-item">
  </div>
</div>

CSS样式和上面无缝滚动的文本类似，只是内部的

marquee-content-item

img

.marquee-gallery-wrapper {
  display: flex; /* 让图片水平排列 */
  white-space: nowrap; /* 防止图片换行 */
  animation: scroll-gallery 20s linear infinite; /* 调整动画速度 */
}

.gallery-item {
  flex-shrink: 0; /* 防止图片被压缩 */
  width: 150px; /* 示例图片宽度 */
  height: 100px; /* 示例图片高度 */
  margin-right: 15px; /* 图片之间的间距 */
  object-fit: cover; /* 确保图片填充且不失真 */
}

@keyframes scroll-gallery {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); /* 同样，如果复制了一半内容，就移动50% */ }
}

关键在于

display: flex;

flex-shrink: 0;

如何控制CSS跑马灯的暂停、速度和方向？

控制跑马灯的动态行为是提升用户体验的关键。CSS提供了非常直观的属性来管理这些方面。

暂停（Pause）： 最常见的需求是当用户鼠标悬停在跑马灯上时，它能暂停滚动，方便用户阅读。这可以通过

animation-play-state

.marquee-content, .marquee-content-wrapper {
  animation: scroll-left 15s linear infinite; /* 正常播放动画 */
}

.marquee-container:hover .marquee-content,
.marquee-container:hover .marquee-content-wrapper {
  animation-play-state: paused; /* 鼠标悬停时暂停动画 */
}

这里，我们将

animation-play-state: paused;

:hover

速度（Speed）： 控制跑马灯的速度非常简单，只需要调整

animation-duration

• animation-duration: 15s;

  ：15秒完成一次动画周期。

• animation-duration: 5s;

  ：5秒完成一次动画周期，速度更快。

• animation-duration: 30s;

  ：30秒完成一次动画周期，速度更慢。

数值越小，动画完成得越快，看起来就越“急”。反之，数值越大，动画越慢，给人一种悠闲的感觉。

方向（Direction）： 改变跑马灯的滚动方向，主要有两种方式：

1. 调整

   @keyframes

   中的

   transform

   值：
   • 向左滚动（默认）：

     from { transform: translateX(0); } to { transform: translateX(-100%); }

   • 向右滚动：

     from { transform: translateX(-100%); } to { transform: translateX(0); }

     (或者从

     0

     到

     100%

     ，取决于你希望内容从哪边进入)
   • 向上滚动：

     from { transform: translateY(0); } to { transform: translateY(-100%); }

   • 向下滚动：

     from { transform: translateY(-100%); } to { transform: translateY(0); }

   这种方法更直观，因为你直接定义了元素从哪到哪。

2. 使用

   animation-direction

   属性： 如果你已经定义了一个从左到右或从上到下的动画，但想让它反向播放，可以使用

   animation-direction: reverse;

   。

   .marquee-content {
     animation: scroll-left 15s linear infinite; /* 假设 scroll-left 是从左到右 */
     animation-direction: reverse; /* 让它从右到左播放 */
   }

   这个属性会反转动画的播放方向，而无需修改

   @keyframes

   本身。这在某些场景下非常方便，比如你希望在不同状态下切换滚动方向。

通过这些CSS属性的组合和调整，你几乎可以实现各种你想要的跑马灯效果，而且相比旧的

marquee