直接用 animation: infinite 会卡顿或错位，因 css @keyframes 在循环交接点无法自动补全视觉连续性，需双份内容拼接、线性缓动、精确位移及 gpu 加速。
为什么直接用 animation: infinite 会卡顿或错位？
因为纯 CSS 的 @keyframes 滚动动画在循环交接点（最后一帧跳回第一帧）时，浏览器无法自动补全视觉连续性，尤其当 Logo 宽度不均、容器未预留足够缓冲空间时，会出现明显“闪跳”或停顿。这不是写法错误，而是 CSS 动画的固有局限——它只控制时间轴，不感知内容布局。
实操建议：
- 必须用双份 Logo 列表拼接（
logos + logos），让滚动到末尾时自然衔接到开头，避免帧跳跃 - 动画时长需与总滚动距离匹配：若单份列表总宽为
W，则动画从transform: translateX(0)到translateX(-W)，时长设为duration，再设infinite - 禁用
ease类缓动函数——线性（linear）是唯一能保持匀速滚动的选项，否则速度变化会暴露衔接破绽
如何用 Flex 布局保证 Logo 间距一致且响应式缩放？
用 display: flex 替代浮动或 inline-block，核心在于控制子项行为而非父容器对齐方式。常见错误是给 .logo-item 设固定宽高，导致小屏下溢出或留白。
实操建议：
- 父容器设
flex-wrap: nowrap和overflow: hidden，禁止换行并裁剪溢出 - 每个
.logo-item设flex: 0 0 auto（不伸缩、不压缩、按内容宽），再统一加margin-right: 2rem控制间隔 - Logo 图片用
max-width: 120px; height: auto;，配合object-fit: contain防止拉伸，小屏下用媒体查询缩小max-width
怎样让动画真正“无缝”，而不是靠视觉欺骗？
所谓无缝，本质是让滚动终点与起点在任意时刻都处于同一视觉位置。这需要两个条件同时满足：动画位移值精确等于单份内容宽度，且动画播放过程中无重绘抖动。
实操建议：
- 用 JS 动态计算单份总宽：
const totalWidth = container.scrollWidth / 2;（因 DOM 中已放两份），再注入 CSS 变量--scroll-width: ${totalWidth}px - CSS 中用
transform: translateX(calc(-1 * var(--scroll-width)))替代硬编码像素值，避免响应式断点失效 - 添加
will-change: transform到滚动容器，触发 GPU 加速；但注意仅在动画元素上启用，避免过度触发重绘 - 测试时关闭浏览器开发者工具的“Disable cache”，否则热更新后动画可能沿用旧宽值导致错位
移动端触摸暂停和 hover 暂停的兼容写法
用户希望鼠标悬停或手指触摸时暂停动画，但 :hover 在 iOS Safari 上不触发，且 touchstart 事件默认不冒泡到父容器。
实操建议：
- CSS 层面：用
.logo-wall:hover, .logo-wall:active { animation-play-state: paused; }，:active覆盖部分触屏场景 - JS 补充：监听
touchstart和touchend，给容器切pausedclass，并设user-select: none防止误触发文字选中 - 避免用
pointer-events: none—— 它会让:hover失效，且在部分 Android 浏览器中与touch事件冲突
最麻烦的其实是 SVG Logo 的颜色继承问题：如果父容器设了 filter: grayscale()，部分旧版 Safari 会把 SVG 内联色块渲染成黑块。得单独给 SVG 加 fill: currentColor 并确保其 currentColor 有定义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
