HTML网页中实现文字左右来回滚动代码-html教程-PHP中文网

纯 css 可实现文字左右平滑滚动，核心是用 @keyframes 配合 transform: translatex() 和 infinite 循环；避免用 margin-left 或 left 触发重排，需设 white-space: nowrap、display: inline-block，动画时长 ≥10s 且用 ease-in-out 更自然。

html网页中实现文字左右来回滚动代码

用 CSS `animation` 实现文字左右平滑滚动

纯 CSS 就能搞定，不需要 JS。核心是用 @keyframes 定义从左到右再回左的位移，配合 transform: translateX() 和 infinite 循环。

常见错误是直接用 margin-left 或 left 动画——会触发重排，卡顿明显；translateX 走 GPU，更流畅。

容器需设 white-space: nowrap 防止文字换行
滚动元素要设 display: inline-block 或 display: inline，否则 width 不生效
动画时长建议 ≥ 10s，太快易眩晕；ease-in-out 比 linear 更自然

示例：

@keyframes scrollLeftRight {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}
.scrolling-text {
  animation: scrollLeftRight 12s ease-in-out infinite;
  white-space: nowrap;
  display: inline-block;
}

`marquee` 标签还能用吗？

能，但不推荐。它已被 HTML5 废弃，Chrome/Firefox 虽暂未移除，但行为不一致（比如 Safari 已基本不支持），且无法精确控制速度、暂停、方向切换等。

典型问题：<marquee behavior="alternate"></marquee> 在部分安卓 WebView 中失效；scrollamount 值在不同设备上实际像素偏移差异大。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

仅适合内网老系统兼容性兜底，新项目别碰
若真要用，必须加 direction="left" + behavior="alternate" 才左右来回
无法响应鼠标悬停暂停（除非 JS 注入事件，反而更麻烦）

需要鼠标悬停暂停？用 `:hover` 控制动画状态

CSS 方案完全可以支持交互，关键在 animation-play-state。

默认设 animation-play-state: running
加 .scrolling-text:hover { animation-play-state: paused; }
注意：不要只写 :hover，得带上具体选择器，否则可能被父级 hover 干扰
如果滚动内容含链接，记得给 a 元素也加 pointer-events: auto，否则 hover 失效

长文本滚动不连贯？补全首尾内容实现无缝

单纯左右动一次，末尾回到起点会有“跳变”。解决办法是复制一份文字拼在后面，让动画结束点刚好对齐起点视觉位置。

原理：动画从 -100% 到 +100vw，但内容宽度 > 容器宽时，需确保动画终点对应完整文本长度 + 间隙。

最简做法：HTML 里写两遍文字，如 <span>欢迎光临欢迎光临</span>
更灵活：用伪元素 ::after 复制内容，避免 DOM 冗余
若用 JS 动态生成，注意更新后要重置动画：el.style.animation = "none"; el.offsetHeight; el.style.animation = "";

滚动效果是否自然，关键不在代码多寡，而在位移起止点是否匹配内容实际宽度和容器视口。这点容易被忽略，调不好就总觉得“卡一下”。