深蓝背景上叠着四张半透明的磨砂卡片，最前面一张完全展开，后面三张依次缩小、上移，只露出标题条。按住最上面那张往左右拖，卡片会跟着手指倾斜，越过一段距离松手就顺势飞出画面，后面的卡同时平滑地补上来并放大到正位；拖得不够远则弹回原处。卡片也可以用键盘 Tab 聚焦后操作。技术上是 CSS 的 backdrop-filter 做玻璃质感，原生 JavaScript 处理拖拽，没有用任何手势库。

这套卡组的三个做法

层叠位置是按序号算的。脚本维护一个顺序数组，每次重绘时按下标给每张卡一个上移量和缩放比例，切换卡片只是把数组首尾对调，再整体重算一遍，不需要单独写动画。
倾斜角跟着拖动距离走。位移量同时喂给 translateX 和 rotate，拖得越远转得越多，手感接近真实的甩牌。
内容有轻微反向位移。卡片往右拖时，里面的文字块会往左挪一点点，制造出内容层比卡面「慢半拍」的视差。

越过阈值才算滑走

判断一次拖动到底算不算「换牌」，靠的是一个像素阈值：

const SWIPE_THRESHOLD = 100;

松手时比较累计位移与这个值，超过就播放飞出动画并轮转卡序，没超过就把变换清空让卡片弹回。源码还在刚越过阈值的那一刻调用了一次震动反馈，并用一个标记位保证一次拖动只震一下，手指来回越线不会连续震。这类「阈值 + 触发标记」的写法，是自己写滑动交互时最容易漏掉的一环。

能改的地方

堆叠的间距、缩放比例、滑走阈值都是脚本开头的三个常量，想让卡堆更紧凑就调小间距。每张卡的主题色写在标签的行内变量上，进度条、圆点、按钮都会跟着变。卡片数量不限，复制一段结构即可，脚本按实际元素数量自动适配。玻璃感的强弱在 backdrop-filter 的模糊半径与卡片背景的透明度上。

常见问题

卡片是不透明的，看不出玻璃效果？

磨砂依赖 backdrop-filter，需要较新版本的 Chrome、Edge、Safari 或 Firefox，旧版本会退化成半透明色块。另外卡片背后必须有内容可透，纯色背景下玻璃感会不明显。

手机上拖动会带动页面滚动？

源码已经在容器上关掉了滚动链，但如果把它嵌进一个可滚动的长页面，仍建议在拖动开始时临时锁定页面滚动，结束后再恢复。

能改成上下滑动吗？

可以。把拖拽里记录横坐标的地方换成纵坐标，并把 translateX 与 rotate 的组合改成 translateY，其余逻辑不用动。

适合用在哪

项目进度展示、产品功能分步介绍、移动端的推荐流与卡片式问答，也适合作为「一次只看一张」的信息浏览模式。层叠计算与拖拽判定的完整实现都在脚本里，下载后可查看。