答案是使用html、css和javascript组合替代废弃的marquee标签。通过css动画实现文字或图片平滑滚动，利用@keyframes定义位移；或用javascript动态控制元素位置，复制内容实现无缝衔接，并支持交互操作，兼容性好且更灵活。
在HTML5中， 标签已被废弃，不再推荐使用。要实现无缝滚动效果，推荐使用 HTML + CSS + JavaScript 的现代方法。下面介绍几种常见且兼容性良好的替代方案。
1. 使用CSS动画实现横向无缝滚动
通过CSS的@keyframes和transform，可以制作平滑的无缝滚动文字或图片。
示例：横向滚动新闻标题
<div class="scroll-container">
<div class="scroll-content">
热点新闻：HTML5替代marquee方法 | 今日科技动态 | 前端开发技巧 | 滚动不停歇
</div>
</div>
说明：
立即学习“前端免费学习笔记（深入）”；
eMart 网店系统
下载
功能列表：底层程序与前台页面分离的效果，对页面的修改无需改动任何程序代码。完善的标签系统，支持自定义标签，公用标签，快捷标签，动态标签，静态标签等等，支持标签内的vbs语法，原则上运用这些标签可以制作出任何想要的页面效果。兼容原来的栏目系统，可以很方便的插入一个栏目或者一个栏目组到页面的任何位置。底层模版解析程序具有非常高的效率，稳定性和容错性，即使模版中有错误的标签也不会影响页面的显示。所有的标
- padding-left: 100% 初始将内容推到可视区域外
- 动画从右向左移动-100%距离，形成循环
- 速度由animation-duration控制，可调快慢
2. 使用JavaScript控制滚动（更灵活）
适合需要动态内容或复杂逻辑的场景，比如图片轮播、实时数据流。
<div id="scrollArea" style="width:300px; overflow:hidden; white-space:nowrap;">
<span id="scrollText">? 欢迎访问我的网站 - HTML5滚动教程 - 不再使用marquee </span>
</div>
<p><script>
const container = document.getElementById('scrollArea');
const text = document.getElementById('scrollText');</p><p>// 克隆内容，实现无缝衔接
text.innerHTML += text.innerHTML;</p><p>function startScroll() {
let position = 0;
const speed = 1; // 像素/帧</p><p>setInterval(() => {
position -= speed;
if (position <= -text.offsetWidth / 2) {
position = 0;
}
text.style.transform = <code>translateX(${position}px)</code>;
}, 20);
}</p><p>startScroll();
</script>
优点：
- 可动态添加内容
- 支持暂停、加速等交互控制
- 兼容老浏览器
3. 图片无缝滚动示例
常用于广告图或产品展示。
<div class="image-scroll" style="width:100%; overflow:hidden; height:100px;">
<div class="image-track" style="display:flex; animation: scroll 15s linear infinite;">
@@##@@
@@##@@
@@##@@
<!-- 重复一次图片，实现无缝 -->
@@##@@
@@##@@
@@##@@
</div>
</div>
<p><style>
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); } /<em> 移动一半长度 </em>/
}
</style>
关键点：复制一组图片，当第一组移出时，第二组刚好接上，视觉上无停顿。
基本上就这些方法。用CSS动画简单高效，JavaScript控制更灵活。根据实际需求选择即可。
