怎样实现文字的走马灯效果_MARQUEE标签制作滚动文字-html教程-PHP中文网

标签已被 html5 废弃，不推荐使用；应采用 css @keyframes 实现可访问、可控的滚动效果，并按需叠加 javascript 交互逻辑。

怎样实现文字的走马灯效果_marquee标签制作滚动文字

<marquee></marquee> 标签在现代前端开发中**不推荐使用**，它已被 HTML5 废弃，Chrome、Firefox、Edge 等主流浏览器虽仍能渲染，但无标准支持、无 ARIA 语义、无法键盘导航、不响应屏幕阅读器，且 CSS 动画替代方案更可控、更可访问。下面直接说怎么用现代方式实现等效效果，以及为什么老标签要避开。

为什么 `<marquee></marquee>` 会失效或行为异常

常见现象包括：滚动突然卡住、在移动端完全不滚动、刷新后方向错乱、与 Flex/Grid 布局冲突。根本原因是该标签没有定义明确的 CSS 盒模型行为，浏览器对其解析依赖私有实现。

behavior="slide" 和 behavior="alternate" 在 Safari 中可能被忽略
scrolldelay 和 scrollamount 单位模糊（毫秒？像素？无规范）
无法用 JavaScript 动态控制暂停/继续（marquee.stop() 非标准，仅 IE/旧 Edge 支持）
无障碍属性如 aria-live 无法可靠绑定

CSS `@keyframes` 实现平滑滚动文字

用纯 CSS 可精准控制速度、方向、循环、暂停，并天然支持 :hover 暂停和媒体查询适配。

.marquee {
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}
.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: scroll-left 20s linear infinite;
}
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

动画时长 20s 越大越慢；若内容短，可减小避免“空档期”
padding-left: 100% 是关键：让文字初始位置从右侧开始进入视区
需包裹两份相同文字（如 <span>文本文本</span>），否则结尾会闪白
加 .marquee:hover span { animation-play-state: paused; } 实现悬停暂停

JavaScript 控制滚动节奏与交互逻辑

当需要动态控制（如点击切换方向、API 加载后启动、滚动到视口才激活），CSS 动画就力不从心，此时应封装轻量 JS。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

用 requestAnimationFrame 替代 setInterval，避免丢帧
监听 IntersectionObserver 判断是否在视口内，节省资源
方向切换建议用 transform: scaleX(-1) 翻转容器，比重写动画更稳定
避免直接操作 element.style.left —— 触发重排，性能差

示例节选：

const el = document.querySelector('.js-marquee');
let isPaused = false;
function animate() {
  if (!isPaused) el.scrollLeft += 0.5;
  if (el.scrollLeft >= el.scrollWidth / 2) el.scrollLeft = 0;
  requestAnimationFrame(animate);
}
animate();