html怎么添加滚动文字？滚动效果实现方法-html教程-PHP中文网

html怎么添加滚动文字？滚动效果实现方法

下次还敢

发布： 2025-06-13 10:00:03

原创

183人浏览过

滚动文字在网页中可通过三种方法实现：1.使用html的标签最简单但兼容性差；2.用css动画实现更灵活且适合响应式布局；3.通过javascript控制可实现交互操作。每种方式适用场景不同，按需选择即可。

html怎么添加滚动文字？滚动效果实现方法

滚动文字在网页中虽然用得不多了，但偶尔还能见到一些信息提示类的应用，比如新闻头条、公告栏等。实现方法其实不复杂，主要是通过 HTML 的标签或者结合 CSS 和 JavaScript 来实现。

1. 使用标签最简单

这是最直接的方法，HTML 原生支持的一个标签，可以直接让文字水平或垂直滚动。

<marquee>这是一段水平滚动的文字</marquee>

登录后复制

还可以设置方向：

立即学习“前端免费学习笔记（深入）”；

<marquee direction="up">这段文字会向上滚动</marquee>

登录后复制

常见属性包括：

direction：设置滚动方向（left, right, up, down）
behavior：滚动方式（scroll, slide, alternate）
loop：滚动次数，默认无限循环
scrollamount：滚动速度，数值越大越快

优点是写法简单，适合快速实现；缺点是兼容性和现代浏览器支持一般，且不符合语义化标准。

2. 用 CSS 动画实现更灵活的滚动效果

如果希望控制得更精细一点，可以用 CSS 的 @keyframes 来做动画滚动。

<div class="scroll-text">
  <p>这是一段通过 CSS 实现的滚动文字</p>
</div>

登录后复制

配合 CSS：

.scroll-text {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.scroll-text p {
  display: inline-block;
  padding-left: 100%;
  animation: scrollLeft 10s linear infinite;
}

@keyframes scrollLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

登录后复制

这种方式可以自定义动画时间、方向、缓动函数等，也更容易和响应式布局结合使用。

3. JavaScript 控制动态滚动行为

如果你需要根据用户操作或其他事件来控制滚动文字的启停、方向变化等，可以用 JS 配合样式控制。

例如添加一个按钮来暂停/继续滚动：

<button onclick="toggleScroll()">暂停/继续</button>
<div id="js-scroll" class="scroll-text-js">
  这段文字可以通过点击按钮控制滚动状态
</div>

登录后复制

JS 部分：

let isScrolling = true;

function toggleScroll() {
  isScrolling = !isScrolling;
  const el = document.getElementById('js-scroll');
  el.style.animationPlayState = isScrolling ? 'running' : 'paused';
}

登录后复制

CSS 中要加上 animation-play-state 的支持：

.scroll-text-js {
  animation: scrollLeft 10s linear infinite;
}

登录后复制

这种方法适合需要交互控制的场景，比如鼠标悬停暂停、点击切换方向等。

基本上就这些方法了。如果你想快速实现，最方便；如果追求兼容性、可维护性和美观效果，建议用 CSS 或 JS 方案。每种方式都有适用场景，按需选择就好。

以上就是html怎么添加滚动文字？滚动效果实现方法的详细内容，更多请关注php中文网其它相关文章！

html怎么添加滚动文字？滚动效果实现方法

1. 使用 标签最简单

2. 用 CSS 动画实现更灵活的滚动效果

3. JavaScript 控制动态滚动行为

1. 使用标签最简单