用 CSS 滚动驱动动画实现轮播交互

是什么

这是一条展示 CSS 滚动驱动动画的技术推文。画面用四张自然风景图构成横向轮播，中心显示当前焦点，两侧露出相邻内容；箭头、侧边预览和四段进度标记共同构成轮播反馈。

核心设计

实现重点是把每个 li 绑定命名为 --item 的横向 view-timeline，再让 li::scroll-marker 的 grow 动画读取同一条 animation-timeline。当条目进入或离开滚动视口时，标记按可见进度生长，当前项因此无需额外 JavaScript 状态就能被表达。拖拽体验作为增强层叠加在原生横向滚动之上，保留基础可用性。

关键洞察

它把轮播的内容位置、导航状态和动效时间线统一到滚动本身，减少状态同步与事件监听，交互也更贴合用户手势。中心大图、两侧露出的相邻图片和高对比圆形箭头，既提示可继续探索，也让当前焦点明确。

边界与风险

view-timeline、animation-timeline 与 ::scroll-marker 的浏览器支持和实现细节仍可能不一致；应提供静态标记、按钮导航和可滚动的基础版本，并测试键盘、触控、拖拽冲突、RTL 与 reduced motion。该方案适合图片画廊、媒体浏览和产品导览，但不应把 CSS 动效当作唯一的状态或可访问性反馈。