可访问卡片堆叠切换 · 在线演示

演示了什么：这个 Demo 让你亲眼看到一叠卡片如何在悬停或键盘聚焦时扇形展开，并在点击后把最前面的卡片“抽走再塞回底部”。它同时保留了按钮语义和读屏提示，所以不只是好看，也能被键盘和辅助技术使用。

关键实现：

1. css 里的 .front/.mid/.back 用自定义属性保存位移、旋转和层级，悬停时只改变量；这样动画集中走 transform，避免频繁重排。
2. js 里的 applySlots() 只给最前卡片 tabIndex=0，因为被遮住的卡片如果还能聚焦，会让键盘用户失去空间感。
3. js 里的 cycle() 先加 .spin 播放飞出动画，再延迟更新 order；这是为了让视觉顺序和数据顺序错峰切换，避免卡片瞬移。

动手改一改：

1. 改 css 中 .stack:hover .mid 的 --x，数值越大，展开扇面越夸张。
2. 把 js 中 setTimeout(...,420) 改成 150 或 700，观察数据换位过早或过晚时的穿帮感。