如何通过 CSS 实现走马灯效果（纯前端实现）

在实际项目中，公告栏、通知栏、消息提示等场景，经常会用到走马灯滚动效果 。

很多人第一反应是用 JavaScript，但实际上，仅用 CSS 就能完成大多数需求，而且实现简单、性能稳定。

本文将从原理 → 实现 → 常见问题，完整讲清楚 CSS 走马灯的做法。

一、CSS 走马灯的实现思路

CSS 走马灯本质上只有三个核心点：

外层容器固定尺寸并隐藏溢出内容
内部内容横向排列
通过 @keyframes 不断平移内容

一句话概括：

在一个"看不见边界"的容器里，让内容持续向一个方向移动。

二、基础 HTML 结构

走马灯的 HTML 结构应尽量简单：

html 复制代码

<div class="marquee">
  <div class="marquee-content">
    <span>系统公告：今晚 23:00 维护</span>
    <span>新功能已上线，欢迎体验</span>
    <span>客服热线：400-xxx-xxxx</span>
  </div>
</div>

结构说明：

marquee：可视区域
marquee-content：实际滚动内容
span：每一条展示信息

三、核心 CSS 样式

1️⃣ 外层容器样式

css 复制代码

.marquee {
  width: 100%;
  height: 40px;
  overflow: hidden;
  background-color: #f5f5f5;
  line-height: 40px;
}

关键点说明：

overflow: hidden：这是走马灯能成立的前提
固定高度，避免动画过程中页面抖动

2️⃣ 内容横向排列

css 复制代码

.marquee-content {
  display: inline-flex;
  white-space: nowrap;
}

作用：

所有内容在同一行显示
防止自动换行导致动画中断

四、添加滚动动画

1️⃣ 定义动画

css 复制代码

@keyframes marquee-scroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

说明：

从容器右侧进入
滚动到完全离开左侧

2️⃣ 应用动画

css 复制代码

.marquee-content {
  animation: marquee-scroll 10s linear infinite;
}

参数含义：

10s：滚动速度（时间越大，滚动越慢）
linear：匀速滚动，避免忽快忽慢
infinite：无限循环

五、常见优化技巧

1️⃣ 鼠标悬停暂停滚动

css 复制代码

.marquee:hover .marquee-content {
  animation-play-state: paused;
}

适合公告、提示类内容，提升可读性。

2️⃣ 内容间距调整

css 复制代码

.marquee-content span {
  margin-right: 60px;
}

避免多条内容挤在一起，提升视觉体验。

3️⃣ 控制滚动方向（向右）

css 复制代码

@keyframes marquee-scroll {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

六、适用场景说明

纯 CSS 走马灯适合：

公告栏 / 通知栏
活动提示
简单信息轮播
后台系统提示区域

不适合：

复杂交互
精准控制某一条停留时间
动态插入大量数据（这类更适合 JS）

七、小结

CSS 实现走马灯的优势非常明显：

不依赖 JavaScript
实现简单，代码少
性能开销低
兼容性好

在大多数「信息滚动展示」场景下，优先使用 CSS 方案即可。