纯css图片垂直滚动需用flex+@keyframes+图片序列复制实现；容器设overflow:hidden、flex-direction:column，动画位移值等于所有图片总高度，复制序列确保无缝循环，hover暂停用animation-play-state，反向滚动用animation-direction。
纯 CSS 就能实现图片垂直滚动，关键不是用 background-position（那是背景图动），而是让 <img> 元素本身在容器内持续上移或下移。主流方案是 flex + @keyframes + 复制序列，兼容性好、性能稳、无需 JS。
用 flex 布局+ translateX 动画做垂直滚动？别搞错方向
很多人照搬水平滚动写法，把 translateX 改成 translateY 就以为能垂直滚——这思路没错，但容易漏掉两个硬性前提：
- 容器必须设
overflow: hidden，否则滚动内容会撑开布局或溢出可见区 -
.scroll-track（图片容器）需用flex-direction: column，且所有<img>必须不换行、紧密堆叠，总高度 > 容器高度 - 动画终点值不是随便写个
-100px，而是要等于「所有图片高度之和」，否则位移不到位、循环断裂
错误示例：@keyframes scrollY { to { transform: translateY(-100px); } } —— 如果三张图各高 200px，总高 600px，只移 -100px 就卡住了。
无缝循环必须复制图片序列，不能只靠 animation-timing-function
单次动画从 translateY(0) 到 translateY(-600px) 结束后，浏览器会瞬间跳回起点，肉眼可见“闪跳”。解决方法只有一个：在 HTML 里把图片列表复制一遍。
原始结构：<div class="scroll-track">
<img src="a.jpg"><img src="b.jpg"><img src="c.jpg">
</div>
改成：<div class="scroll-track">
<img src="a.jpg"><img src="b.jpg"><img src="c.jpg"><img src="a.jpg"><img src="b.jpg"><img src="c.jpg">
</div>
这样动画只需走完前半段（-600px），后半段自然接上，视觉上就是无限平滑滚动。动画时长建议 20–30 秒，太快易晕，太慢显呆滞。
hover 暂停和反向滚动只需两行 CSS
用户鼠标悬停时暂停、移开继续，不需要 JS 监听事件。直接用 animation-play-state 控制：
.scroll-track:hover { animation-play-state: paused; }
要支持点击切换方向（比如上滚/下滚），可额外定义一个类：
.scroll-track.reverse { animation-direction: reverse; }
然后用 JS 切换类名：el.classList.toggle('reverse')。注意：不要用 animation-name 切换不同动画，会导致重绘抖动。
移动端滚动卡顿？检查 will-change 和图片尺寸
iOS Safari 和部分安卓 WebView 对频繁 transform 重绘敏感，尤其图片多或尺寸大时。两个实操点：
- 给滚动容器加
will-change: transform，提前提示浏览器优化渲染路径 - 确保所有
<img>是等比例缩放（如统一设height: 120px; width: auto），避免每张图宽高不一导致 layout 波动 - 禁用
object-fit或background-size: cover在滚动元素上，它们会干扰 transform 的合成层判断
最后提醒：别用 <marquee></marquee> 标签。它已被 HTML5 废弃，Chrome/Firefox 已移除支持，Safari 仅保留基础行为且无 hover 控制能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
