纯css水平轮播需双份内容衔接，因单份滚动至终点会跳回起点造成卡顿；复制内容后，位移-总宽时恰为第二组开头，视觉无缝。关键要求：flex布局+flex-shrink:0+显式宽高，@keyframes终点严格等于含margin/padding的原始总像素宽，动画用linear，外层容器overflow:hidden且定位固定。
纯 CSS 就能实现稳定水平轮播，关键不是加动画，而是让位移终点严格等于原始内容总宽，并用双份内容自然衔接。
为什么必须复制图片列表两遍
单份内容滚动到末尾时，transform: translateX(-总宽) 会瞬间跳回起点，人眼可察觉“卡顿”或“闪白”。复制一遍（A-B-C → A-B-C-A-B-C）后，动画走到 -总宽 时，视觉上正好是第二组的开头，接缝被隐藏。
- HTML 中直接写两轮：
<div class="scroll-track"> <img><img><img><img><img><img> </div>（后三个是前三个副本） - 不推荐用 JS 动态克隆——首次渲染慢、SSR 不友好、tab 切换后易掉帧
- 如果图数量多（比如 20+），建议用构建时脚本生成副本，而非手写重复 HTML
flex 布局下必须设的三个 CSS 属性
缺一不可，否则 flex 会压缩、换行或缩放，导致位移错位：
-
display: flex：确保子元素水平排列 -
flex-shrink: 0：禁止图片被 flex 压缩（尤其在容器窄于总宽时） - 每张图显式设
width和height（如width: 240px; height: 160px;），不能只靠max-width: 100%或百分比
漏掉 flex-shrink: 0 是最常见错误，会导致动画终点偏移几像素，接缝处明显露白。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
@keyframes 里位移值怎么算才准
终点值不是“容器宽度”，也不是“图片数量 × 单图宽”，而是：原始一份内容的实际渲染总宽，含所有 margin/padding/gap。
- 示例：3 张图，每张
width: 200px，左右各margin: 16px→ 总宽 =3 * 200 + 2 * 16 = 632px - 动画必须写：
100% { transform: translateX(-632px); }，差 1px 都可能在循环点出现半像素撕裂 - 用
getBoundingClientRect()在控制台手动量一次原始内容宽度，比心算更可靠 - 禁用
ease或ease-in-out，必须用linear，否则速度不均，接缝处一卡就露馅
外层容器和 overflow 的隐藏逻辑
很多人以为只要给 .scroll-track 加 overflow: hidden 就行，其实必须加在外层容器上：
- 外层容器（如
.scroll-container）设：overflow: hidden; position: relative; width/height 固定 -
.scroll-track本身不能设overflow，否则动画会被截断或触发重排 - 没加
position: relative时，transform可能脱离文档流，导致父容器高度塌陷 - 移动端需额外加
will-change: transform提升合成层，避免低端机掉帧
最容易被忽略的是：动画位移值依赖的是渲染后的像素宽，而这个宽度受字体、缩放、DPR 影响。上线前务必在真机（尤其是 iOS Safari）上验证接缝是否完全消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
