HTML5代码如何制作无缝滚动 HTML5代码中marquee的替代方法

<div class="scroll-container">
  <div class="scroll-content">
    热点新闻：HTML5替代marquee方法 | 今日科技动态 | 前端开发技巧 | 滚动不停歇
  </div>
</div>

<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>

<div class="image-scroll" style="width:100%; overflow:hidden; height:100px;">
  <div class="image-track" style="display:flex; animation: scroll 15s linear infinite;">
    <img src="img1.jpg" width="100" alt="图1" style="margin-right:20px;">
    <img src="img2.jpg" width="100" alt="图2" style="margin-right:20px;">
    <img src="img3.jpg" width="100" alt="图3" style="margin-right:20px;">
    <!-- 重复一次图片，实现无缝 -->
    <img src="img1.jpg" width="100" alt="图1" style="margin-right:20px;">
    <img src="img2.jpg" width="100" alt="图2" style="margin-right:20px;">
    <img src="img3.jpg" width="100" alt="图3" style="margin-right:20px;">
  </div>
</div>
<p><style>
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); } /<em> 移动一半长度 </em>/
}
</style>