怎么用HTML插入滚动文字效果_HTML marquee标签替代方案

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

怎么用HTML插入滚动文字效果_HTML marquee标签替代方案

2025-11-03

浏览次数：次

返回列表

使用CSS动画替代marquee标签可实现横向、纵向滚动文字效果，通过@keyframes与transform属性控制平滑动画，配合J*aScript实现交互功能，提升兼容性与用户体验。

怎么用html插入滚动文字效果_html marquee标签替代方案

在早期的网页设计中，marquee 标签被广泛用于创建滚动文字效果。但这个标签早已被现代标准弃用，不推荐在HTML中使用。为了实现更兼容、更可控的滚动文字效果，我们可以使用 CSS 动画 或 J*aScript 来替代。

使用 CSS 实现横向滚动文字

通过 CSS 的 @keyframes 和 transform 属性，可以轻松创建平滑的滚动动画，且无需 J*aScript。

示例代码：

BrandCrowd

一个在线Logo免费设计生成器

200 查看详情 BrandCrowd

<style>
.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%);
  }
}
</style>

<div class="scrolling-text">
  <span>这里是滚动的文字内容，可以是新闻标题或公告信息。</span>
</div>

说明：文字从右向左滚动，padding-left: 100% 确保起始位置在容器外右侧，动画将其平移出左侧。

使用 J*aScript 控制滚动行为

如果需要更灵活的控制（如暂停、加速、方向切换），可以用 J*aScript 动态调整元素位置。

示例代码：

<div id="scrollText" style="overflow: hidden; width: 100%; white-space: nowrap;">
  <span>用 J*aScript 实现可交互的滚动文字效果。</span>
</div>

<script>
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();
</script>

这种方式适合需要响应用户操作（如鼠标悬停暂停）的场景。

垂直滚动文字（跑马灯式公告）

对于上下滚动的公告栏，也可以用 CSS 动画实现。

<style>
.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%); }
}
</style>

<div class="vertical-scroll">
  <span>第一条公告<br>第二条公告<br>第三条公告</span>
</div>