纯css无缝滚动公告栏的关键是transform动画配合overflow:hidden与内容复制/偏移策略，而非仅依赖position；需确保内容宽度≥容器宽×2，用translatex实现匀速循环滚动，并满足尺寸约束与悬停定位修复。
纯 CSS 实现无缝滚动公告栏，关键不在“定位”而在“动画 + 容器裁剪 + 内容复制/偏移策略”。position 仅用于辅助控制，真正起作用的是 transform 动画与 overflow: hidden 的配合。
为什么不能只靠 position: absolute + left 动画？
用 @keyframes 控制 left 值（如从 0% 到 -100%）看似简单，但会暴露两个硬伤：
- 动画终点时元素完全移出容器左边界，视觉上出现“断层”，无法循环衔接
-
left是基于父容器的静态定位，不随内容宽度自适应；当文字长度变化或字体缩放时，100%不再等于实际内容宽度，滚动速度失准甚至卡顿 - IE 和旧版 Safari 对
left动画的渲染性能差，易抖动
transform: translateX() 是唯一可靠路径
所有现代无缝滚动方案都依赖 transform —— 它触发 GPU 加速、支持 sub-pixel 渲染、且动画值可精确映射到像素级位移。
核心逻辑是：让滚动内容宽度 ≥ 容器宽度 × 2，再用 translateX 把它匀速拖过视口。常见写法有两类：
-
单行双份复制法：
.scroll-content内容重复两遍（如A B C A B C），动画从0移到-100%，视觉上C接A无感 -
padding-left 补位法（更轻量）：不复制 DOM，靠
padding-left: 100%在开头预留空白，动画从0到-200%，等效实现循环
示例关键帧：
@keyframes rowScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-200%); }
}
容器与内容必须满足的尺寸约束
无缝成立的前提是物理条件匹配，不是光写动画就能生效：
-
.scroll-wrap必须设固定宽高 +overflow: hidden，否则裁剪失效 -
.scroll-content必须是inline-block或flex，且white-space: nowrap防止换行破坏连续性 - 若用
flex布局多子项（如多个.scroll-item），.scroll-list的总宽需为max-content，不能被width: 100%截断 - 动画时长（如
15s）应按内容总宽 / 视口宽动态估算，硬编码会导致小屏快、大屏慢
悬停暂停时的定位偏移修复
加 :hover 暂停动画很常见，但若同时触发 .details 面板显示，面板位置可能因元素部分移出视口而错乱——此时 getBoundingClientRect().left 返回负值，直接赋给 margin-left 会导致残留偏移。
正确做法是双向重置：
- 检测
left → 添加 <code>margin-left避免飞出左边界 - 检测
left > 0 && left → 清除 <code>margin-left，恢复原始定位 - 不要只监听
mouseenter，要在requestAnimationFrame循环中持续校验位置
最容易被忽略的点：动画暂停后，transform 状态仍停留在某一帧，此时读取 getBoundingClientRect 返回的是静止位置，而非滚动中的逻辑位置。必须结合动画当前进度做插值补偿，否则悬停面板永远对不齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
