HTML在线运行怎么实现文字滚动的效果？跑马灯代码编写-html教程-PHP中文网

标签已被html5废弃，现代浏览器行为不一致且不可控；应使用css @keyframes + transform: translatex()实现平滑滚动，需设置overflow: hidden、white-space: nowrap及线性无限动画。

html在线运行怎么实现文字滚动的效果？跑马灯代码编写

用 `<marquee></marquee>` 最快但不推荐

直接写 <marquee>欢迎光临</marquee> 确实能立刻看到文字滚动，但它早已被 HTML5 废弃，Chrome、Firefox、Edge 等现代浏览器虽暂未完全移除，但控制行为不一致（比如暂停逻辑、方向默认值），且无法通过 CSS 精确控制动画时长、缓动或响应式表现。

更关键的是：W3C 明确不鼓励使用，VS Code 会标黄警告，CI/CD 流程里可能被 linter 拦截。

CSS `@keyframes` + `animation` 是标准解法

核心思路是让文字容器在固定宽度内水平位移，利用 translateX() 和无限循环动画实现平滑滚动。比 <marquee></marquee> 更可控，也兼容所有现代浏览器。

常见错误现象：文字闪跳、滚动卡顿、移动端失效——多因没设 white-space: nowrap 或忘了加 overflow: hidden。

基础写法示例：

<div class="marquee">
  <span>新闻速递：AI模型训练成本下降40%｜产品上线倒计时3天｜用户反馈已同步至研发团队</span>
</div>

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

动画时长 20s 可按内容长度和展示节奏调整；太短易眩晕，太长显呆滞
padding-left: 100% 是为了撑开初始位置，让文字从右边界外开始入场
若需反向滚动，把 translateX(-100%) 改成 translateX(100%) 即可

JavaScript 方案适合动态内容或交互控制

当滚动文字需要实时更新（如弹幕）、点击暂停/继续、或与后端 API 联动时，CSS 动画就力不从心了。此时用 JS 控制 transform 或修改 left 值更灵活。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

要点：

避免直接操作 left 触发重排，优先用 transform: translateX()
用 requestAnimationFrame 替代 setInterval，保证帧率稳定
记得监听窗口大小变化，重新计算滚动范围（尤其响应式页面）
暂停时清除 rAF ID，恢复时重建动画循环

最小可行代码片段（无依赖）：

const el = document.querySelector('.js-marquee');
let pos = el.offsetWidth;
let rafId;

function animate() {
  pos -= 0.5;
  el.style.transform = `translateX(${pos}px)`;
  if (pos 

<h3>移动端和可访问性必须考虑的细节</h3>
<p>跑马灯对视障用户极不友好：屏幕阅读器通常跳过动态内容，且自动滚动干扰聚焦。WCAG 明确建议提供暂停/停止机制，并避免在无交互前提下持续运动。</p>
<p>实操建议：</p>