这是一款分层视差 3D 卡片轮播特效,基于 HTML + CSS 3D + 原生 JavaScript 与 SVG 渐变波浪实现,不依赖任何框架。
每张卡片由背景层、边框层、内容层叠加而成:鼠标移动时卡片随之倾斜,各图层按不同深度偏移,SVG 波浪与几何装饰图形也以不同速度错位跟随,形成明显的纵深立体感;移开即平滑复位。轮播支持左右按钮、圆点跳转、键盘方向键与移动端滑动手势四种切换方式,缓动曲线柔和,窗口缩放后位置自动重算,适配桌面与手机。示例内容按健康、数学、生物等类别配色区分,每张卡片带独立标题、说明与跳转按钮。
适用于产品功能展示、工具导航页、作品集陈列、课程与专题介绍等需要突出卡片内容的场景。