CSS动画替代HTML滚动文本的实现方法
2025-10-30 19:04:03
0浏览
收藏
还在用过时的`
使用CSS动画替代废弃的marquee标签可实现更高效、兼容性强的滚动文本效果。通过transform与@keyframes结合overflow:hidden控制容器，能创建水平、垂直及无缝循环的滚动动画。水平滚动利用padding-left或双文本复制实现平滑衔接，垂直滚动则通过translateY在固定高度容器内轮播内容。配合animation属性调节速度与方向，提升性能与视觉体验，符合现代Web标准且易于维护扩展。
HTML中的标签虽然能实现文字滚动效果，但早已被现代标准废弃，不推荐在实际项目中使用。更好的方式是采用CSS动画来创建兼容性强、样式可控的滚动文本效果。下面介绍几种基于CSS的替代方案。
使用CSS动画实现水平滚动文本
通过transform和@keyframes可以轻松实现从右向左滚动的文字效果，适用于新闻条、通知栏等场景。
基本结构如下：
<div class="marquee-container">
<div class="marquee-text">
这是一段会滚动显示的文本内容，持续循环播放。
</div>
</div>
CSS样式设置：
.marquee-container {
overflow: hidden;
white-space: nowrap;
width: 100%;
box-sizing: border-box;
}
<p>.marquee-text {
display: inline-block;
padding-left: 100%; /<em> 初始位置在容器外右侧 </em>/
animation: marquee-scroll 10s linear infinite;
}</p><p>@keyframes marquee-scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}</p>说明：文本从右向左滑入并完全移出左侧后循环。可通过调整animation-duration控制速度。
无缝循环滚动（首尾衔接）
如果希望滚动过程更平滑、无跳闪，可复制一次内容，让动画结束时下一个内容刚好接上。
HTML结构：
<div class="marquee-continuous">
<div class="marquee-content">
滚动文本示例
滚动文本示例
</div>
</div>
CSS实现：
.marquee-continuous {
overflow: hidden;
width: 100%;
}
<p>.marquee-content {
display: inline-block;
white-space: nowrap;
animation: scroll-left 8s linear infinite;
}</p><p>@keyframes scroll-left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%); /<em> 移动一半宽度，实现无缝衔接 </em>/
}
}</p>注意：两个重复文本总宽应为容器两倍，动画移动-50%即可完成一次平滑过渡。
垂直滚动文本（上下滚动）
类似新闻ticker或公告栏，可用垂直方向的transform实现。
.marquee-vertical {
height: 50px;
overflow: hidden;
position: relative;
}
<p>.marquee-vertical-item {
position: absolute;
white-space: nowrap;
animation: slide-up 6s linear infinite;
}</p><p>@keyframes slide-up {
0% {
transform: translateY(50px);
}
100% {
transform: translateY(-50px);
}
}</p>此方法适合少量条目轮播，若需多条消息切换，建议配合JavaScript控制。
总结
用CSS动画替代不仅符合现代Web标准，还能灵活控制动画速度、方向和行为。关键点包括：使用overflow: hidden隐藏溢出内容，transform提升性能，@keyframes定义动画路径。基本上就这些，不复杂但容易忽略细节。合理运用能让滚动文本既美观又高效。
好了，本文到此结束，带大家了解了《CSS动画替代HTML滚动文本的实现方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！
Windows兼容模式设置教程
- 上一篇
- Windows兼容模式设置教程
- 下一篇
- 三星首发PerplexityAI应用，开启电视AI新体验
查看更多
最新文章
-
- 文章 · 前端 | 15秒前 |
- CSS居中定位方法详解
- 293浏览 收藏
-
- 文章 · 前端 | 1分钟前 |
- CSSMotionPath详解与使用技巧
- 276浏览 收藏
-
- 文章 · 前端 | 7分钟前 | JavaScript 推送通知 ServiceWorker PushAPI WebNotificationsAPI
- JavaScript消息系统实现详解
- 393浏览 收藏
-
- 文章 · 前端 | 10分钟前 |
- Flex布局导航栏对齐问题解决方法
- 152浏览 收藏
-
- 文章 · 前端 | 10分钟前 |
- aria-label与label如何避免表单重复标签
- 374浏览 收藏
-
- 文章 · 前端 | 13分钟前 |
- CSS图表颜色自定义全攻略
- 481浏览 收藏
-
- 文章 · 前端 | 28分钟前 |
- 对象属性描述符与不变性详解
- 451浏览 收藏
-
- 文章 · 前端 | 34分钟前 | TypeScript 类型安全 开发体验 JS插件开发 .d.ts文件
- TypeScript在JS插件开发中的优势与应用
- 448浏览 收藏
-
- 文章 · 前端 | 55分钟前 |
- CSS圆角头像技巧：border-radius与overflow应用
- 241浏览 收藏
查看更多
课程推荐
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。
- 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。
- 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让
- 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。
- 485次学习
查看更多
AI推荐
-
- ChatExcel酷表
- ChatExcel酷表是由北京大学团队打造的Excel聊天机器人，用自然语言操控表格，简化数据处理，告别繁琐操作，提升工作效率！适用于学生、上班族及政府人员。
- 3182次使用
-
- Any绘本
- 探索Any绘本（anypicturebook.com/zh），一款开源免费的AI绘本创作工具，基于Google Gemini与Flux AI模型，让您轻松创作个性化绘本。适用于家庭、教育、创作等多种场景，零门槛，高自由度，技术透明，本地可控。
- 3393次使用
-
- 可赞AI
- 可赞AI，AI驱动的办公可视化智能工具，助您轻松实现文本与可视化元素高效转化。无论是智能文档生成、多格式文本解析，还是一键生成专业图表、脑图、知识卡片，可赞AI都能让信息处理更清晰高效。覆盖数据汇报、会议纪要、内容营销等全场景，大幅提升办公效率，降低专业门槛，是您提升工作效率的得力助手。
- 3425次使用
-
- 星月写作
- 星月写作是国内首款聚焦中文网络小说创作的AI辅助工具，解决网文作者从构思到变现的全流程痛点。AI扫榜、专属模板、全链路适配，助力新人快速上手，资深作者效率倍增。
- 4530次使用
-
- MagicLight
- MagicLight.ai是全球首款叙事驱动型AI动画视频创作平台，专注于解决从故事想法到完整动画的全流程痛点。它通过自研AI模型，保障角色、风格、场景高度一致性，让零动画经验者也能高效产出专业级叙事内容。广泛适用于独立创作者、动画工作室、教育机构及企业营销，助您轻松实现创意落地与商业化。
- 3802次使用
查看更多
相关文章
-
- JavaScript函数定义及示例详解
- 2025-05-11 502浏览
-
- 优化用户界面体验的秘密武器：CSS开发项目经验大揭秘
- 2023-11-03 501浏览
-
- 使用微信小程序实现图片轮播特效
- 2023-11-21 501浏览
-
- 解析sessionStorage的存储能力与限制
- 2024-01-11 501浏览
-
- 探索冒泡活动对于团队合作的推动力
- 2024-01-13 501浏览
