CSS无缝滚动核心是双份内容+overflow:hidden，动画终点必须设为translateX(-50%)以实现视觉无缝衔接，禁用left/margin动画，须用transform+will-change触发硬件加速。
局部滚动容器必须用 overflow: hidden + 双份内容
局部滚动（比如某个 .news-ticker 区域内文字横向跑马灯）要无缝，核心不是靠 JS 定时重置位置，而是 DOM 层面先确保“有得接”。如果只放一份内容，transform: translateX(-100%) 移出后后面空着，必然露白或跳帧。
正确结构是：外层容器设 overflow: hidden，内层轨道（.marquee-track）里放两遍完全相同的内容块（.marquee-item），总宽度为原始内容的 200%。
- 不要用
padding-left: 100%搞初始偏移——它依赖渲染宽度估算，易错位 - 不要用
left或margin-left动画——触发重排，卡顿明显 - 必须用
transform: translateX()，并加will-change: transform触发合成层
@keyframes 终点必须是 translateX(-50%)
很多人写 to { transform: translateX(-100%); }，结果滚动到一半就断了。这是因为动画终点值要对齐「双份内容」的逻辑中点：总宽是 200%，移动 -50% 就刚好把第二份内容的开头拉到可视区左边界，视觉上无缝衔接到第一份的起点。
示例关键 CSS：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
@keyframes marquee-move {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.marquee-track {
animation: marquee-move 20s linear infinite;
will-change: transform;
}
- 动画时长（
20s）决定速度，越小越快；别设太短，否则低端设备掉帧 - 不能用
%单位以外的值（如px）写终点——内容宽度变化时会失准 - 若内容含图片或不定高元素，务必设
white-space: nowrap和display: inline-block防换行
鼠标悬停暂停必须用 animation-play-state
用 pointer-events: none 或 JS 控制 animation-play-state 是常见错误。前者禁用所有交互，后者容易因异步时机不准导致动画残留一帧。原生 CSS 的暂停最稳：
.marquee-container:hover .marquee-track {
animation-play-state: paused;
}
- 选择器必须精确匹配到带动画的元素（这里是
.marquee-track），不是父容器 - 避免在 hover 时修改
transform或opacity——会打断硬件加速层 - 如果需高亮当前项，应在
.marquee-item上用:hover单独处理，不干扰主动画
纵向无缝滚动要严控 line-height 和 height 像素对齐
横向靠 -50% 还能蒙混过关，纵向滚动（如公告栏逐条上浮）对像素精度极度敏感。translateY(-100%) 错 1px 就会抖动或卡住，因为字体渲染、line-height 计算、border 或 padding 都可能引入亚像素偏差。
- 容器高度（
height）和单行内容高度（line-height）必须都用px，且数值相等 - 内容总高度 = 单行高度 × 行数 × 2，动画终点设为
translateY(-50%)更安全 - 含图片时加
vertical-align: top，否则 baseline 对齐会产生意外间隙 - 慎用
em/rem，它们随根字号缩放，破坏像素一致性
真正难的不是写出来，是让不同设备、不同缩放比例下都稳定对齐——这需要你亲手测真机，而不是只看开发工具模拟器。
