这是一套完全不依赖 JavaScript 的封面流（Cover Flow）图片轮播。中间一张图正对镜头，两侧的图片向内翻转成侧面并逐级缩小、叠成两摞；滚动、拖拽或点左右箭头，图片会带着透视连续翻转过来，底部一排圆点指示当前位置，选中的那颗会拉长成胶囊。滚动带吸附，停下来永远正好对齐一张图。

它真正特别的地方在于：整套逻辑是 CSS 自己算出来的。以往这种效果必须靠脚本监听滚动、计算每张图的偏移再写 transform，这里换成了一组新的 CSS 能力——用兄弟序号函数拿到每张图的编号，用滚动驱动动画把滚动进度写进一个自定义属性，两者相减得到“这张图离当前位置有多远”，剩下的旋转、缩放、层级、堆叠间距全部由这个距离推导。所以，你在 HTML 里加一张图或删一张图，样式一个字都不用改。

这套封面流轮播的四个关键设计

滚动进度被变成了一个可计算的数字。滚动容器上挂了一条 1 毫秒的动画，时间轴设为自身的横向滚动，动画内容只是把一个自定义属性从 0 推到 1，于是滚动位置就成了可以参与 calc 的变量。
每张图知道自己是第几张、一共几张。sibling-index() 与 sibling-count() 让样式表在不知道图片数量的前提下也能算出中心位置，这是“增删图片不改 CSS”的根本原因。
左右按钮和圆点是原生的。::scroll-button() 与 ::scroll-marker-group、::scroll-marker 由浏览器直接生成，自带键盘可达性与当前项状态，不需要额外标签，也不需要脚本同步高亮。
控件位置用锚点定位对齐。滚动容器声明了一个 anchor-name，按钮和圆点组以它为锚点定位，容器尺寸随视口变化时控件自动跟随，不用写一堆百分比换算。

“距离”这一个变量是怎么撑起整个效果的

其一，核心只有一次减法。滚动进度乘以（总数减一）得到当前停在第几张的浮点位置，每张图用自己的序号减去它：

--_cover-flow-slide-distance: calc(
  var(--_cover-flow-slide-index) - var(--_cover-flow-nav-position));

这个值为 0 表示正在中央，正负表示在右侧或左侧，绝对值表示离得多远。之后的一切——绕 Y 轴转多少度、缩到多小、堆到多远、z 轴层级排第几——都是拿它做的函数。用 clamp 把它夹在 -1 到 1 之间就得到“朝哪一侧”，用 abs() 取绝对值就得到“多远”，两个内置函数省掉了原本必须靠脚本做的分支判断。

其二，侧边图的堆叠间距是按投影宽度算的。图片旋转 58 度后在屏幕上的可见宽度并不是原宽，而是原宽乘以缩放再乘以角度的余弦。样式里正是这么写的，所以不管你把旋转角度改成 40 度还是 70 度，两摞图之间的空隙都会自动保持视觉一致，不会出现改了角度就重叠或散开的情况。

其三，它对不支持的浏览器有正经的降级。文件末尾有一段很长的 @supports not 检测，把用到的十几项特性逐个列出来，只要缺一项就隐藏轮播、显示一条说明文字。这类实验性特性组合的稳妥做法就是如此：不做假装能用的兜底，直接告知。

拿到源码后能改什么

可调参数集中在 .cover-flow 选择器顶部一整块带注释的自定义属性里，分成几组：图片原始宽高（要和标签里的图片尺寸对上）、滚动按钮的大小与边距、圆点组的位置（顶部/居中/底部）与大小、控件的底色与激活色、过渡时长与缓动，以及最影响观感的四个——旋转角度、透视距离、最小缩放、堆叠间距。想让效果更平缓就减小旋转角度并加大透视距离；想更夸张就反过来。

换图片就是改 HTML 里的 li 列表，数量随意。若图片不是正方形，记得把宽高两个变量改成实际比例，否则容器高度会算错。按钮上的箭头是内联的 SVG 数据 URL，替换那一串就能换成自己的图标。

还有一处细节值得留意：样式里对 prefers-reduced-motion 做了处理，开启系统的“减弱动态效果”后会关掉平滑滚动与圆点的过渡。做正式项目时建议保留这段。

运行提示：这套效果依赖多项较新的 CSS 特性（兄弟序号函数、自定义函数、滚动驱动动画、锚点定位、原生滚动控件伪元素），目前需要较新版本的 Chromium 内核浏览器（Chrome、Edge）才能完整运行，Firefox 与 Safari 的支持进度不一，遇到不支持时页面会自动显示提示文字而不是错乱。可直接双击 index.html 打开，无需服务器。详细运行方法请参见压缩包内的帮助文档。

关于纯 CSS 封面流轮播的常见问题

真的一行 JavaScript 都没有吗？

是的，目录里没有脚本文件。滚动进度、当前项高亮、左右翻页全部由 CSS 与浏览器原生控件完成，这也意味着它不会因为脚本加载失败而失效。

能放几十张图吗？会卡吗？

数量上没有限制，样式是按序号推导的。但每张图都参与 3D 变换与合成，图片过多时首屏解码压力会变大，建议给图片加上懒加载属性并控制单图体积。

手机上能滑动吗？

可以。容器设置了横向的触摸滚动与吸附，手指滑动是原生行为，手感比脚本模拟的更跟手。左右按钮在窄屏下会按视口单位自动缩小。

在 Safari 或 Firefox 里看不到效果怎么办？

说明当前版本缺少所需特性之一，页面会自动切换到提示文案。若你的项目必须覆盖这些浏览器，可以保留这套作为渐进增强层，另做一套传统轮播兜底。

这套轮播适合用在什么场景

它气质偏精致，适合作品集首页、摄影与设计工作室的项目展示、专辑与书籍封面墙、产品图册的沉浸式浏览页。因为零脚本、参数化程度高，接进现有项目的成本也很低——通常只需要复制一段样式和一段列表标签。距离推导、堆叠间距的余弦换算、原生控件样式与降级检测的完整写法都在源码中，注释齐全，下载后可查看。