答案是使用HTML、CSS和JavaScript组合替代废弃的marquee标签。通过CSS动画实现文字或图片平滑滚动，利用@keyframes定义位移；或用JavaScript动态控制元素位置，复制内容实现无缝衔接，并支持交互操作，兼容性好且更灵活。
在HTML5中， 标签已被废弃，不再推荐使用。要实现无缝滚动效果，推荐使用 HTML + CSS + JavaScript 的现代方法。下面介绍几种常见且兼容性良好的替代方案。
1. 使用CSS动画实现横向无缝滚动
通过CSS的@keyframes和transform，可以制作平滑的无缝滚动文字或图片。
示例：横向滚动新闻标题
热点新闻：HTML5替代marquee方法 | 今日科技动态 | 前端开发技巧 | 滚动不停歇
.scroll-container { width: 100%; overflow: hidden; white-space: nowrap; box-sizing: border-box;}
.scroll-content {display: inline-block;padding-left: 100%;animation: scrollText 10s linear infinite;}
@keyframes scrollText {0% {transform: translateX(0);}100% {transform: translateX(-100%);}}
说明：
立即学习“前端免费学习笔记（深入）”；
padding-left: 100% 初始将内容推到可视区域外动画从右向左移动-100%距离，形成循环速度由animation-duration控制，可调快慢
2. 使用JavaScript控制滚动（更灵活）
适合需要动态内容或复杂逻辑的场景，比如图片轮播、实时数据流。
? 欢迎访问我的网站 - HTML5滚动教程 - 不再使用marqueeconst container = document.getElementById('scrollArea');const text = document.getElementById('scrollText');
// 克隆内容，实现无缝衔接text.innerHTML += text.innerHTML;
function startScroll() {let position = 0;const speed = 1; // 像素/帧
setInterval(() => {position -= speed;if (position <= -text.offsetWidth / 2) {position = 0;}text.style.transform =
translateX(${position}px);}, 20);}startScroll();
优点：
可动态添加内容支持暂停、加速等交互控制兼容老浏览器
3. 图片无缝滚动示例
常用于广告图或产品展示。
@keyframes scroll {0% { transform: translateX(0); }100% { transform: translateX(-50%); } / 移动一半长度 /}
关键点：复制一组图片，当第一组移出时，第二组刚好接上，视觉上无停顿。
基本上就这些方法。用CSS动画简单高效，JavaScript控制更灵活。根据实际需求选择即可。
以上就是HTML5代码如何制作无缝滚动 HTML5代码中marquee的替代方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1587050.html
微信扫一扫 
支付宝扫一扫 
