CSS实现跑马灯文字效果方法
还在用老旧的`
要实现无缝跑马灯文字效果，核心是复制内容并配合CSS动画完成平滑位移，1. 使用HTML结构包含重复的文本内容以确保视觉衔接；2. 通过CSS设置容器overflow: hidden和white-space: nowrap隐藏溢出内容并防止换行；3. 利用padding-left: 100%将滚动内容起始位置移至容器右侧外；4. 定义@keyframes动画，从transform: translateX(0)到translateX(-100%)实现向左连续滚动；5. 应用animation属性设置线性无限循环动画，并通过:hover暂停提升可访问性；6. 添加will-change: transform优化渲染性能；7. 在响应式设计中根据屏幕尺寸调整动画速度或降级为静态显示；8. 对动态内容需用JavaScript控制动画启停与宽度计算以保证无缝效果，最终形成流畅、可控、兼容性好的跑马灯，完整实现现代Web中替代传统marquee标签的优雅解决方案。
要用CSS制作跑马灯文字，核心是利用@keyframes规则配合transform: translateX()属性，让文字在容器内实现连续的水平位移，再通过overflow: hidden裁剪超出部分，形成循环滚动的效果。
解决方案
制作一个基本的跑马灯文字效果，我们需要一个容器来限定显示区域，以及一个或多个文本元素在其中滚动。
HTML 结构：
这是一个跑马灯文字示例，文字会从右向左滚动。 这是第二段内容，也可以跟着一起滚动。 这是一个跑马灯文字示例，文字会从右向左滚动。 这是第二段内容，也可以跟着一起滚动。
CSS 样式：
.marquee-container {
width: 100%; /* 或者固定宽度 */
overflow: hidden; /* 隐藏超出容器的内容 */
white-space: nowrap; /* 确保文字不换行 */
box-sizing: border-box; /* 边框和内边距包含在宽度内 */
border: 1px solid #ccc; /* 方便观察效果 */
padding: 10px 0;
position: relative; /* 为内容定位做准备 */
}
.marquee-content {
display: inline-block; /* 确保内容在同一行 */
padding-left: 100%; /* 从容器右侧完全移入开始 */
animation: scroll-left 15s linear infinite; /* 动画名称、时长、速度曲线、无限循环 */
/* 优化性能，提前告知浏览器此元素将进行位移 */
will-change: transform;
}
.marquee-content span {
display: inline-block; /* 确保每个span都在一行 */
margin-right: 50px; /* 文字之间的间距 */
}
/* 定义动画关键帧 */
@keyframes scroll-left {
0% {
transform: translateX(0%); /* 初始位置，内容完全在右侧 */
}
100% {
transform: translateX(-100%); /* 结束位置，内容完全在左侧，实现循环 */
}
}
/* 鼠标悬停时暂停动画 */
.marquee-container:hover .marquee-content {
animation-play-state: paused;
}这段代码通过将.marquee-content的padding-left设置为100%，使其初始位置在容器右侧完全隐藏，然后通过translateX(-100%)让它向左移动一个自身的宽度，从而实现内容从右到左的滚动。为了实现无缝循环，我在marquee-content内部复制了一份内容，这样当第一份内容即将滚出屏幕时，第二份内容正好接上。
为什么传统的
说实话，每次看到网站还在用那个老旧的标签，我心里都会咯噔一下。它确实能实现文字滚动，但那已经是上个世纪的产物了，在现代Web开发中几乎被完全弃用了。主要原因在于它的可访问性极差。想象一下，一个屏幕阅读器用户或者有视觉障碍的用户，面对一段不停滚动的文字，根本无法有效捕捉和阅读信息，这简直是灾难性的体验。而且，它也不是W3C标准的一部分，这意味着浏览器对其支持可能不稳定，或者未来会彻底移除。
相比之下，CSS方案的优势简直是碾压式的。首先，它提供了精细到极致的控制。你可以调整动画的时长、速度曲线（linear、ease-in、ease-out等）、延迟、循环次数，甚至可以控制动画在特定状态下暂停或反向。这些都是标签望尘莫及的。其次，CSS动画的性能通常更好。浏览器在处理CSS transform属性时，很多时候可以利用GPU进行硬件加速，动画会显得更流畅，对CPU的负担也更小。最后，也是非常重要的一点，使用CSS意味着你保持了语义化的HTML结构，内容是内容，样式是样式，这符合现代Web开发的最佳实践，也更利于维护和响应式设计。对我个人而言，这种掌控感和灵活性是无法替代的。
如何让跑马灯文字实现无缝循环，避免突然跳动？
实现无缝循环是跑马灯效果的关键，也是很多人初次尝试时容易遇到“跳动”问题的地方。我见过不少朋友直接让文字从transform: translateX(0)跑到translateX(-100%)，结果就是当动画结束时，文字会突然“瞬移”回起点，非常突兀。
要解决这个问题，核心思路是让动画的起点和终点在视觉上衔接起来。最直接有效的方法是复制内容。比如，你的滚动内容是“你好，世界！”，那么在HTML结构里，你实际放入的可能是“你好，世界！你好，世界！”（或者更多份）。然后，让整个包含这些内容的元素进行位移。
具体来说，就是像我前面解决方案里展示的那样：
- 容器宽度固定，并设置
overflow: hidden;。 - 滚动内容元素（
.marquee-content）的宽度要大于容器的宽度，并且包含重复的文本。 - 动画的起始点：让滚动内容元素从容器的右侧完全移入开始。这可以通过给
.marquee-content设置padding-left: 100%;来实现，这样它的实际内容会从屏幕外开始。 - 动画的结束点：让滚动内容元素向左移动，直到第一份内容的末尾刚好滚出屏幕，同时第二份内容的开头正好进入屏幕。在我的例子中，
@keyframes的100%处设置为transform: translateX(-100%);，这里的-100%是相对于.marquee-content自身宽度的位移。如果.marquee-content的宽度恰好是其内部所有文本宽度之和的两倍（因为复制了一份），那么这个位移量就能保证无缝衔接。
这种方式的好处是，无论你的文字多长，只要你复制了足够多的份数，并且动画位移的距离和内容总长度匹配，就能实现视觉上的无限循环，没有丝毫的卡顿或跳跃感。它就像一个无限的传送带，文字源源不断地从一边出现，又从另一边消失。
在实际项目中应用跑马灯文字时，有哪些常见的陷阱和优化建议？
在实际项目中应用跑马灯文字，远不止写几行CSS那么简单，有很多细节需要考虑，否则可能会带来意想不到的问题。
首先，可访问性是重中之重。我之前提到过，不停滚动的文字对某些用户来说是阅读障碍。所以，一个基本的优化是提供暂停/播放功能。最简单的方式就是我代码里写的:hover暂停，但更进一步，应该提供一个可见的按钮让用户手动控制。对于屏幕阅读器，可以考虑使用aria-live="off"或"polite"来控制其播报行为，并在内容重要时提供非滚动版本的替代信息。我个人觉得，如果信息非常重要，就不要用跑马灯了，或者至少提供一个静态的、易于阅读的版本。
其次是性能。虽然transform通常性能不错，但如果你的跑马灯内容非常复杂，或者页面上有大量其他动画，仍然可能导致性能问题。一个常用的优化是使用will-change: transform;。这个CSS属性会提前告诉浏览器，这个元素将要进行transform操作，让浏览器可以提前进行一些优化，比如创建独立的图层，从而减少动画过程中的重绘和重排。但也要注意，will-change不能滥用，只应用于那些确实会频繁变化的元素，否则反而可能消耗更多内存。
再来是响应式设计。跑马灯文字在不同屏幕尺寸下的表现可能会大相径庭。手机屏幕小，文字可能很快就滚过去了，或者显示不全。PC端屏幕大，文字可能显得太慢。你需要考虑如何根据屏幕宽度调整动画速度（比如通过CSS变量或JavaScript），或者在小屏幕上干脆禁用跑马灯效果，直接显示静态文字。我通常会倾向于在小屏幕上简化，毕竟用户体验是第一位的。
最后，内容管理。如果跑马灯的内容是动态加载的，比如来自后端接口，你需要确保在内容加载完成后再启动动画，否则可能会出现空白或者内容闪烁。同时，如果内容长度变化很大，你可能需要用JavaScript来动态计算.marquee-content的宽度和动画时长，以确保无缝循环和合适的滚动速度。这些都是在纯CSS方案之外，需要用一点JavaScript来“打补丁”的地方，但为了更好的用户体验，这些努力都是值得的。
今天关于《CSS实现跑马灯文字效果方法》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于性能优化,CSS动画,无缝循环,可访问性,跑马灯文字的内容请关注golang学习网公众号！
美团月付关闭方法及入口位置
- 上一篇
- 美团月付关闭方法及入口位置
- 下一篇
- 处理嵌套JSON：JavaScript实用技巧
-
- 文章 · 前端 | 1小时前 | 前端 · 可访问性 · 焦点陷阱 HTML dialog 焦点恢复 inert 无障碍弹窗
- 可访问弹窗的焦点陷阱、关闭恢复与背景隔离
- 309浏览 收藏
-
- 文章 · 前端 | 3小时前 | 前端 · 性能优化 · javascript · ArrayBuffer postMessage 前端性能 Web Worker Transferable structured clone
- Web Worker 传大数据为何卡顿：复制与 Transferable 对比
- 220浏览 收藏
-
- 文章 · 前端 | 6小时前 | 请求超时 Fetch AbortController AbortSignal 用户取消 前端异常处理
- Fetch 请求取消后，超时与用户中断要怎样区分
- 466浏览 收藏
-
- 文章 · 前端 | 8小时前 | 文件上传 · javascript · 前端开发 · 大文件上传 断点续传 XMLHttpRequest Blob.slice 前端分片上传 暂停上传
- 前端上传大文件：分片、暂停与失败续传怎样协作
- 371浏览 收藏
-
- 文章 · 前端 | 10小时前 | 列表详情 View Transition API 前端渐进增强
- View Transition API 做列表到详情过渡的渐进增强
- 385浏览 收藏
-
- 文章 · 前端 | 12小时前 |
- 用 CSS Container Query 让卡片按容器而不是视口响应
- 289浏览 收藏
-
- 文章 · 前端 | 15小时前 | 环境变量 vite loadEnv vite.config
- Vite 环境变量为什么在配置加载时取不到
- 133浏览 收藏
-
- 文章 · 前端 | 16小时前 |
- React useOptimistic 怎么在请求失败时回滚列表
- 153浏览 收藏
-
- 文章 · 前端 | 18小时前 | 前端开发 · 前端路由 hostname URLPattern pathname
- URLPattern 怎么同时匹配域名和路径参数
- 108浏览 收藏
-
- 文章 · 前端 | 20小时前 | javascript · JavaScript Intl.DurationFormat 前端国际化 持续时间格式化
- Intl.DurationFormat 怎么本地化显示持续时间
- 141浏览 收藏
-
- 文章 · 前端 | 22小时前 | 前端开发 · 浏览器API · postMessage MessageChannel Web Worker MessagePort
- postMessage 转移 MessagePort 后原端口还能用吗
- 477浏览 收藏
-
- 文章 · 前端 | 1天前 | html · 前端 · LCP fetchpriority HTMLImageElement.fetchPriority 首屏图片 图片加载优先级
- fetchpriority 怎么只提升首屏关键图片
- 343浏览 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。
- 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。
- 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让
- 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。
- 485次学习
-
- PubMedQA
- 深入了解PubMedQA生物医学问答数据集，涵盖其核心功能、使用方法及在临床决策、药物研发等场景的应用，助力提升NLP模型性能。
- 365次使用
-
- H2O EvalGPT
- H2O EvalGPT是H2O.ai推出的开源LLM评估平台，提供详细的大模型性能排行榜、行业特定基准测试及A/B测试功能，助您快速选择最适合项目的高性能大语言模型。
- 422次使用
-
- LMArena
- LMArena是加州大学伯克利分校推出的AI模型匿名评测平台。通过盲测投票机制，用户可对比不同大模型回答并生成实时排行榜，助力开发者优化模型及用户选择最佳AI工具。
- 435次使用
-
- HELM
- 深入了解斯坦福推出的HELM（Holistic Evaluation of Language Models）大模型评测体系。本文解析其核心功能、安装配置步骤及应用场景，涵盖准确性、公平性、鲁棒性等多维度指标，助力开发者全面优化语言模型性能。
- 387次使用
-
- MMBench
- MMBench是由上海人工智能实验室等机构联合推出的多模态基准测试平台，提供细粒度能力评估、大规模数据集及VLMEvalKit工具。本文详细介绍其核心功能、安装使用方法及应用场景，助力开发者全面评估多模态模型性能。
- 214次使用
-
- JavaScript函数定义及示例详解
- 2025-05-11 502浏览
-
- 智能体安全引领产业升级——国内AI安全产品市场深度分析
- 2026-08-21 501浏览
-
- CSS变量简化按钮悬停效果技巧
- 2026-05-31 501浏览
-
- JavaScript符号类型详解与应用
- 2026-05-31 501浏览
-
- HTML剪贴板复制粘贴怎么用
- 2026-05-26 501浏览
