CSS实现跑马灯效果的替代方案

还在用过时的``标签实现跑马灯效果？是时候升级你的技能了！本文介绍如何利用CSS的`@keyframes`规则和`animation`属性，打造高性能、易控制的现代跑马灯效果。通过定义关键帧动画，可以轻松实现文字、图片等元素的滚动。想要无缝循环？只需复制滚动内容，并巧妙设置CSS，即可避免滚动空白。本文还深入讲解了如何使用Flexbox布局，让跑马灯滚动图片或复杂布局成为可能。更重要的是，你可以通过`animation-play-state`控制暂停，`animation-duration`调整速度，以及修改`transform`值或使用`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结构：

  
这是一段滚动的新闻公告，内容会持续向左滚动，循环播放。欢迎关注我们的最新动态！

接着，是关键的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中将需要滚动的实际内容复制一份或多份，并放在同一个滚动元素内。

  

    
这是一段滚动的新闻公告，内容会持续向左滚动，循环播放。欢迎关注我们的最新动态！
    
这是一段滚动的新闻公告，内容会持续向左滚动，循环播放。欢迎关注我们的最新动态！
    
  

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作为滚动单元。

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

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学习网公众号，一起学习编程~

animation CSS动画 transform @keyframes 跑马灯

相关阅读

更多>

• 文章 · 前端   |  1年前  |   CSS 优化 体验
  优化用户界面体验的秘密武器：CSS开发项目经验大揭秘
  501 收藏
• 文章 · 前端   |  1年前  |   图片轮播 微信小程序 特效
  使用微信小程序实现图片轮播特效
  501 收藏
• 文章 · 前端   |  1年前  |   sessionStorage 存储能力 限制解析
  解析sessionStorage的存储能力与限制
  501 收藏
• 文章 · 前端   |  1年前  |   团队合作 冒泡事件 促进作用
  探索冒泡活动对于团队合作的推动力
  501 收藏
• 文章 · 前端   |  1年前  |  
  UI设计中为何选择绝对定位的智慧之道
  501 收藏

最新阅读

更多>

• 文章 · 前端   |  12秒前  |   font-family 阿拉伯文连字 font-variant-ligatures direction:rtl lang="ar"
  CSS阿拉伯文连字优化：font-variant-ligatures实用教程
  351 收藏
• 文章 · 前端   |  6分钟前  |  
  JavaScript如何实现WebSocket通信？
  184 收藏
• 文章 · 前端   |  8分钟前  |  
  JS原型链属性获取方法全解析
  285 收藏
• 文章 · 前端   |  10分钟前  |  
  JavaScript用pullAll移除多个数组元素
  335 收藏
• 文章 · 前端   |  11分钟前  |  
  aria-multiselectable正确用法解析
  463 收藏
• 文章 · 前端   |  14分钟前  |  
  JS数组查找方法：indexOf使用详解
  138 收藏
• 文章 · 前端   |  15分钟前  |   性能优化 CSS动画 clip-path CSS波浪背景 transform:translateX
  CSS波浪背景制作技巧分享
  183 收藏
• 文章 · 前端   |  15分钟前  |  
  HTML简单页脚制作教程
  257 收藏
• 文章 · 前端   |  16分钟前  |  
  HTMLspan标签4种内联用法解析
  417 收藏
• 文章 · 前端   |  17分钟前  |  
  判断JS对象原型是否可配置，主要看其属性是否设置了configurable:true。在JavaScript中，对象的原型（__proto__）本身是一个对象，它的属性是否可配置取决于该属性的描述符。可以通过Object.getOwnPropertyDescriptor()方法来检查原型属性的configurable值。例如：constobj={};console.log(Object.getOw
  399 收藏
• 文章 · 前端   |  18分钟前  |  
  Vue项目配置HTTPS的详细步骤
  365 收藏
• 文章 · 前端   |  30分钟前  |  
  宏任务执行顺序解析
  331 收藏

课程推荐

更多>

• 

  前端进阶之JavaScript设计模式

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

  立即学习 542次学习

• 

  GO语言核心编程课程

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

  立即学习 511次学习

• 

  简单聊聊mysql8与网络通信

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

  立即学习 498次学习

• 

  JavaScript正则表达式基础与实战

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

  立即学习 487次学习

• 

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

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

  立即学习 484次学习

• home首页
• menu_book阅读
• school课程
• smart_toyAI助手
• person我的