左右无缝滚动指图片队列滚动到末尾时视觉上立即接上前段内容，无空白或卡顿；需用CSS动画+元素复制+精确宽度控制实现，marquee因废弃且无法真正无缝而不可用。

什么是左右无缝滚动，为什么不能直接用 marquee

浏览器早已废弃 marquee 标签，且它无法真正“无缝”——滚动到头会停顿或跳变。真正的无缝，是指图片队列滚动到末尾时，视觉上立刻接上前段内容，没有空白或卡顿。这必须靠 CSS 动画 + 元素复制 + 精确宽度控制来实现。

overflow: hidden 和双份图片是硬性前提

容器必须设 overflow: hidden，否则滚动时会看到溢出部分；图片序列需至少重复一次（比如 4 张图就放 8 张），才能在动画结束前把第二组拉到可视区起点。否则动画一循环就会露白。

• 图片总宽度 = 单张宽 × 图片数量 × 2（复制一份）
• 动画 transform: translateX() 的终点值 = -单张宽 × 原图数量（即滚动一个完整周期）
• 动画时长要匹配总宽度和速度，例如总宽 4000px、想每秒滚 100px，就得设 duration: 40s

CSS 动画关键参数：用 linear + infinite + 精确位移

贝塞尔曲线或 ease 会让速度不均，破坏无缝感；必须用 linear 保证匀速。同时，animation-iteration-count: infinite 不可少，但更要确保位移终点刚好等于负的“原始图组总宽”，否则循环点会错位。

@keyframes scrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-2000px); } /* 假设原始4张图每张500px */
}

注意：2000px 是原始图组宽度，不是复制后总宽（4000px）。动画只走一个周期距离，靠复制内容撑出连续感。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

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

实际写法：HTML 结构 + 容器尺寸 + 动画绑定

别用 img 标签单个罗列——容易因加载延迟或尺寸未定导致跳动。推荐用背景图或统一设 width/height 的 img，并用 flex 或 inline-block 排布。

• 容器设 white-space: nowrap 防止换行
• 每个 img 设 display: inline-block; vertical-align: top
• 动画绑定在内部包裹元素（如 <div class="scroller">），而非容器本身
• 务必测试不同屏幕宽度下是否仍无缝——响应式场景中，建议用 vw 或 JS 动态重算位移值

滚动方向反向？把 translateX() 换成 translateX(100%) 起始、translateX(0) 结束，并改动画名为 scrollRight 即可。

最易被忽略的是图片加载时机：没设固定宽高的 img 在加载完成前占位为 0，会导致动画启动后突然撑开、位移错乱。要么预设尺寸，要么等 load 事件再启自动画。