当前位置：首页 > 行业动态 > 正文

html滚动文字

CSS动画实现，利用@keyframes定义滚动轨迹，设置容器overflow隐藏，替代

实现HTML滚动文字的常见方法

使用CSS动画实现滚动效果

通过CSS的@keyframes定义动画,控制文字水平或垂直滚动。

<div class="scroll-text">滚动文字内容</div>
<style>
.scroll-text {
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid #000;
  animation: scroll 5s linear infinite;
}
@keyframes scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
</style>

特点

  • 无需JavaScript，性能较好
  • 可自定义方向、速度、延迟等参数
  • 现代浏览器支持良好

JavaScript动态修改位置

通过定时器周期性调整元素的位置,模拟滚动效果。

html滚动文字 第1张

<div id="js-scroll">JavaScript滚动文字</div>
<script>
const box = document.getElementById('js-scroll');
let x = box.offsetWidth; // 初始位置在右侧
setInterval(() => {
  x -= 1; // 每次移动1px
  if (x < -box.offsetWidth) x = box.offsetWidth; // 重置位置
  box.style.transform = `translateX(${x}px)`;
}, 30); // 每30ms移动一次
</script>

特点

  • 灵活性高，可控制复杂逻辑
  • 需注意性能优化（如减少DOM操作）
  • 兼容低版本浏览器

已废弃的<marquee>

HTML早期提供的专用标签,现已被W3C标记为废弃。

<marquee behavior="scroll" direction="left" scrollamount="5">淘汰的滚动标签</marquee>

缺点

  • 不符合现代Web标准
  • 无法自定义复杂动画效果
  • 部分浏览器已停止支持

方法对比表

方法 兼容性 性能 灵活性 推荐程度
CSS动画 高
JavaScript 中
<marquee>

 不推荐

相关问题与解答

Q1：如何让滚动文字在鼠标悬停时暂停？
A1：可通过CSS暂停动画或JS清除定时器实现，例如CSS方案： 

.scroll-text:hover {
  animation-play-state: paused;
}

Q2：滚动文字出现卡顿怎么办？
A2：

  1. 优先使用CSS动画代替JS实现
  2. 减少DOM元素层级和重绘次数
  3. 使用requestAnimationFrame替代setInterval优化JS性能
  4. 检查是否存在其他耗性能的页面元素（如

HTML
0

相关文章