CSS怎样制作跑马灯效果？marquee替代方案-css教程-PHP中文网

现代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来改变滚动方向。

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

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

@keyframes

登录后复制

规则配合

animation

登录后复制

属性来实现。这不仅能提供比老旧、已废弃的

<marquee>

登录后复制

标签更强大的控制力，比如动画的暂停、反转、速度和方向，还能确保更好的性能和兼容性。在我看来，掌握CSS动画是前端工程师的必备技能，而跑马灯只是它众多应用场景中的一个缩影。

解决方案

要用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

登录后复制

，那么当它移动自身宽度的50%时，就相当于第一个

item

登录后复制

完全移出了视线，第二个

item

登录后复制

正好接上。这种方法对于内容长度不固定的情况，可能需要JavaScript来动态计算并调整

@keyframes

登录后复制

中的

translateX

登录后复制

值，或者更巧妙地利用CSS变量。

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

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

.marquee-content

登录后复制

或

.marquee-content-wrapper

登录后复制

）里面，都能跟着一起滚动。

松果AI写作

专业全能的高效AI写作工具

查看详情

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

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;

登录后复制

确保了内部元素能按你想要的方式水平排列且不被压缩。只要你的HTML结构合理，CSS动画就能很灵活地应用于各种内容类型。

如何控制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）： 改变跑马灯的滚动方向，主要有两种方式：

调整
```
@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); }
```
  登录后复制
这种方法更直观，因为你直接定义了元素从哪到哪。
使用
```
animation-direction
```
登录后复制
属性： 如果你已经定义了一个从左到右或从上到下的动画，但想让它反向播放，可以使用
```
animation-direction: reverse;
```
登录后复制
。
```
.marquee-content {
  animation: scroll-left 15s linear infinite; /* 假设 scroll-left 是从左到右 */
  animation-direction: reverse; /* 让它从右到左播放 */
}
```
登录后复制
这个属性会反转动画的播放方向，而无需修改
```
@keyframes
```
登录后复制
本身。这在某些场景下非常方便，比如你希望在不同状态下切换滚动方向。