介绍
该源码把数字卡牌图片素材做成了完整的展示页,首屏包含卡牌堆叠切换、稀有度筛选和详情说明,页面打开后就能直接看到 NFT 卡面主体,不会出现与卡牌无关的营销壳子。

技术栈
源码采用原生 HTML、CSS、JavaScript 编写,无需安装额外依赖。下载后把这 7 个文件放在同一目录即可直接打开并查看真实效果。
软件架构
- `index.html` 由左侧介绍区、稀有度筛选按钮、卡牌堆叠舞台和右侧详情卡组成。
- `styles.css` 使用玻璃面板、渐变卡面和卡牌层叠位移,保证首屏视觉焦点稳定落在数字卡牌主体上。
- `script.js` 维护卡牌数据、筛选状态和自动轮播,切换后同步更新详情区。
安装教程
- 下载并解压 zip 压缩包。
- 确认 index.html、styles.css、script.js、preview.png、article.html、README.md、package-info.json 位于同一目录。
- 双击 index.html 直接预览,或整体上传到静态空间部署。
使用说明
- 把 `cards` 数组中的名称、编号、说明和背景渐变替换成自己的卡牌信息。
- 如果有真实图片素材,可在卡面中改成背景图或前景图层,保留当前切换逻辑即可。
- 下载站展示时可直接截取当前首屏,无需额外拼装演示文案。
功能讲解
- 卡牌堆叠:通过层级、旋转和纵向错位把多张卡牌清晰展示出来。
- 筛选按钮:支持全部、传说、史诗、功能款三种视角,方便对应不同素材包。
- 详情联动:点击卡牌后右侧编号、主题色和说明会同步变化。
