CSS跑马灯效果实现方式大全

在现代Web开发中，CSS跑马灯效果已成为实现文字或图片滚动的主流选择。本文深入探讨了使用CSS的`@keyframes`规则和`animation`属性创建跑马灯的几种方法，相较于已废弃的``标签，CSS方案提供了更强大的控制力，包括动画暂停、反转、速度和方向的调整，并确保了更好的性能和兼容性。文章详细介绍了如何通过定义关键帧动画，配合`animation`属性，实现基本的跑马灯效果，并重点讲解了如何通过复制滚动内容，配合Flexbox布局，实现无缝循环滚动。此外，还阐述了CSS跑马灯在滚动图片或复杂布局中的应用，以及如何利用`animation-play-state`、`animation-duration`和`animation-direction`等属性，灵活控制跑马灯的动态行为，提升用户体验。掌握这些CSS技巧，能为前端工程师提供更现代、更精细的跑马灯效果解决方案。

现代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属性来实现。这不仅能提供比老旧、已废弃的标签更强大的控制力，比如动画的暂停、反转、速度和方向，还能确保更好的性能和兼容性。在我看来，掌握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）里面，都能跟着一起滚动。

想象一下一个新闻网站的顶部滚动条，里面可能不仅有标题，还有小缩略图、发布日期等。你完全可以将这些元素组织在一个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）： 改变跑马灯的滚动方向，主要有两种方式：

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标签，它们提供了更精细、更现代的控制方式。

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

animation 无缝循环 滚动方向 @keyframes CSS跑马灯

三星手机装Google地图教程

上一篇

三星手机装Google地图教程

下一篇

Java集成百度语音SDK实现语音识别教程

查看更多

最新文章

• 

  文章 · 前端   |  13分钟前  |  

  Stripe邮政编码验证方法详解

  413浏览 收藏

• 

  文章 · 前端   |  18分钟前  |  

  CSS浮动布局响应式实现方法

  138浏览 收藏

• 

  文章 · 前端   |  22分钟前  |  

  CSS中:checked和:disabled用法详解

  149浏览 收藏

• 

  文章 · 前端   |  26分钟前  |  

  CustomEvent跨文档通信全解析

  440浏览 收藏

• 

  文章 · 前端   |  30分钟前  |  

  CORS与JSONP跨域方法解析

  164浏览 收藏

• 

  文章 · 前端   |  36分钟前  |  

  V8引擎解析与性能优化技巧

  463浏览 收藏

• 

  文章 · 前端   |  38分钟前  |   语法 注意事项 多行注释 HTML注释 正确写法

  HTML注释写法及使用技巧

  223浏览 收藏

• 

  文章 · 前端   |  49分钟前  |   grid-template-columns CSSGrid minmax() repeat() 响应式图片列表

  响应式图片列表制作技巧分享

  175浏览 收藏

• 

  文章 · 前端   |  51分钟前  |   缓存策略 ServiceWorker PWA Workbox 离线可用性

  PWA缓存策略：ServiceWorker使用技巧

  407浏览 收藏

• 

  文章 · 前端   |  54分钟前  |  

  CSS盒模型与Grid布局实战技巧

  157浏览 收藏

• 

  文章 · 前端   |  1小时前  |  

  CSS相对定位偏移详解与应用

  105浏览 收藏

• 

  文章 · 前端   |  1小时前  |  

  Python爬虫进阶：动态网站抓取技巧分享

  281浏览 收藏

查看更多

课程推荐

• 

  前端进阶之JavaScript设计模式

  设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。

  543次学习

• 

  GO语言核心编程课程

  本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。

  516次学习

• 

  简单聊聊mysql8与网络通信

  如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让

  500次学习

• 

  JavaScript正则表达式基础与实战

  在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。

  487次学习

• 

  从零制作响应式网站—Grid布局

  本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。

  485次学习

查看更多

AI推荐

• 

  ChatExcel酷表

  ChatExcel酷表是由北京大学团队打造的Excel聊天机器人，用自然语言操控表格，简化数据处理，告别繁琐操作，提升工作效率！适用于学生、上班族及政府人员。

  3186次使用

• 

  Any绘本

  探索Any绘本（anypicturebook.com/zh），一款开源免费的AI绘本创作工具，基于Google Gemini与Flux AI模型，让您轻松创作个性化绘本。适用于家庭、教育、创作等多种场景，零门槛，高自由度，技术透明，本地可控。

  3398次使用

• 

  可赞AI

  可赞AI，AI驱动的办公可视化智能工具，助您轻松实现文本与可视化元素高效转化。无论是智能文档生成、多格式文本解析，还是一键生成专业图表、脑图、知识卡片，可赞AI都能让信息处理更清晰高效。覆盖数据汇报、会议纪要、内容营销等全场景，大幅提升办公效率，降低专业门槛，是您提升工作效率的得力助手。

  3429次使用

• 

  星月写作

  星月写作是国内首款聚焦中文网络小说创作的AI辅助工具，解决网文作者从构思到变现的全流程痛点。AI扫榜、专属模板、全链路适配，助力新人快速上手，资深作者效率倍增。

  4535次使用

• 

  MagicLight

  MagicLight.ai是全球首款叙事驱动型AI动画视频创作平台，专注于解决从故事想法到完整动画的全流程痛点。它通过自研AI模型，保障角色、风格、场景高度一致性，让零动画经验者也能高效产出专业级叙事内容。广泛适用于独立创作者、动画工作室、教育机构及企业营销，助您轻松实现创意落地与商业化。

  3807次使用

查看更多

相关文章

• JavaScript函数定义及示例详解

  2025-05-11 502浏览

• 优化用户界面体验的秘密武器：CSS开发项目经验大揭秘

  2023-11-03 501浏览

• 使用微信小程序实现图片轮播特效

  2023-11-21 501浏览

• 解析sessionStorage的存储能力与限制

  2024-01-11 501浏览

• 探索冒泡活动对于团队合作的推动力

  2024-01-13 501浏览

关于我们 免责声明 意见反馈 联系我们 内容提交

Golang学习网：公益在线Go学习平台，帮助Go学习者快速成长！

技术交流群

Copyright 2023 http://www.17golang.com/ All Rights Reserved ｜ 苏ICP备2023003363号-1

• 
  关注公众号
  Golang学习网

密码登录在这里

微信扫码登录或注册

打开微信扫一扫，快速登录/注册

登录即同意 用户协议 和 隐私政策

微信登录更方便

• 密码登录
• 注册账号

忘记密码

登录

注册

登录即同意 用户协议 和 隐私政策

返回登录

• 重置密码

发送验证码

重置密码