使用CSS动画替代marquee标签可实现横向、纵向滚动文字效果，通过@keyframes与transform属性控制平滑动画，配合JavaScript实现交互功能，提升兼容性与用户体验。
在早期的网页设计中，marquee 标签被广泛用于创建滚动文字效果。但这个标签早已被现代标准弃用，不推荐在HTML中使用。为了实现更兼容、更可控的滚动文字效果，我们可以使用 CSS 动画 或 JavaScript 来替代。
使用 CSS 实现横向滚动文字
通过 CSS 的 @keyframes 和 transform 属性，可以轻松创建平滑的滚动动画，且无需 JavaScript。
示例代码：
.scrolling-text { white-space: nowrap; overflow: hidden; width: 100%; box-sizing: border-box;}.scrolling-text span { display: inline-block; padding-left: 100%; animation: scrollLeft 10s linear infinite;}@keyframes scrollLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); }} 这里是滚动的文字内容，可以是新闻标题或公告信息。
说明：文字从右向左滚动，padding-left: 100% 确保起始位置在容器外右侧，动画将其平移出左侧。
立即学习“前端免费学习笔记（深入）”；
使用 JavaScript 控制滚动行为
如果需要更灵活的控制（如暂停、加速、方向切换），可以用 JavaScript 动态调整元素位置。
示例代码：
用 JavaScript 实现可交互的滚动文字效果。const element = document.getElementById('scrollText').querySelector('span');let position = window.innerWidth;function scrollText() { position--; if (position < -element.offsetWidth) { position = window.innerWidth; } element.style.transform = `translateX(${position}px)`; requestAnimationFrame(scrollText);}scrollText();
这种方式适合需要响应用户操作（如鼠标悬停暂停）的场景。
垂直滚动文字（跑马灯式公告）
对于上下滚动的公告栏，也可以用 CSS 动画实现。
.vertical-scroll { height: 60px; overflow: hidden; position: relative;}.vertical-scroll::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(white 30%, transparent, white 70%); pointer-events: none;}.vertical-scroll span { display: block; animation: scrollUp 8s linear infinite;}@keyframes scrollUp { 0% { transform: translateY(100%); } 100% { transform: translateY(-100%); }} 第一条公告
第二条公告
第三条公告
这种效果常用于网站顶部的消息通知栏。
基本上就这些。用 CSS 动画替代 marquee 标签，不仅更符合现代网页标准，还能提升性能和可维护性。根据实际需求选择横向或竖向滚动方案，结合:hover 暂停等交互优化用户体验。不复杂但容易忽略细节，比如文本长度与动画时间的匹配。
以上就是怎么用HTML插入滚动文字效果_HTML marquee标签替代方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1591683.html
微信扫一扫 
支付宝扫一扫 
