前端代码：全息数字卡片效果，双面多层/支持分层拆解

视差效果 · 科技感全息交易卡片

多层折射 + 视差交互的全息交易卡组件：鼠标悬停或拖拽即可看到光斑滑动、折射纹理、签名描边和亮片贴纸依次显现，配合 Tweakpane 可切换主题、拆解分层或关闭动画。适用于科技/潮玩产品展示、活动页首屏或交互作品集。

模板亮点

• 立体视差：CSS 变量驱动卡片旋转，指针位置实时映射到光源与折射层。
• 全息质感：多层玻璃纹理、光斑、贴纸与签名描边，营造收藏卡的金属光泽。
• 可玩控制：Tweakpane 提供“拆解分层”“动画开关”“主题切换（system/light/dark）”等调试项。
• 动画编排：GSAP + DrawSVG 控制签名线条绘制、光斑滑动与元素渐显，时序清晰。
• 品牌露出：内置 KS主题 徽章与中文标题，可替换为自有品牌或活动信息。

适用人群与场景

• 科技/潮玩/数藏品牌：用作新品曝光、预售或会员卡展示的首屏特效，尤其适合NFT数字藏品的展示。
• 交互与视觉作品集：展示多层视差、全息纹理和 SVG 动画的综合能力。
• 课程/培训：讲解 GSAP 动画、Canvas/SVG 滤镜、CSS 3D 视差与调试面板的示例。

设计与色彩

• 背景：浅/深主题可切换，网格纹理衬托全息卡主体。
• 纹理：折射图案、光斑、高光与描边叠加，形成金属亮片质感。
• 字体：Sora + 手写签名体，呼应科技又带收藏属性。

文件结构

• index.html：页面骨架、卡片正反面与文案。
• style.css：层级动画、全息纹理、滤镜与响应式样式，含调试状态。
• script.js：GSAP 动画编排、光源同步、Tweakpane 控制（ES6 module）。

使用方式

1. 在http协议下打开 index.html 预览（不能直接 file:// 协议打开）；需联网加载 CDN（Normalize、GSAP、Tweakpane）。
2. 品牌替换：修改顶部卡片标题、副标题；如需换背景图或头像，替换相应图片地址。
3. 动画/交互：在 script.js 调整 GSAP 时序、DrawSVG 速度或 Tweakpane 默认配置；若不需调试面板，可移除 Pane 绑定。
4. 主题与拆解：通过控制面板开启“拆解分层”观察每个层级的深度。

本地运行教程

本项目使用了 ES6 模块（<script type="module" src="./script.js"></script>），这类项目必须通过 HTTP 服务器运行，不能直接使用 file:// 协议打开。所以在电脑本地测试修改时可以选择下面方法来进行效果预览。

方法一：使用编辑器里的实时预览插件

VS Code 扩展市场安装：Live Preview （作者：ms-vscode 即微软官方扩展）

安装后：

1. 在编辑器中打开你的项目文件夹
2. 右键 index.html
3. 选择 Show Preview
4. 自动启动 http://127.0.0.1:3001/index.html

✔ 自动刷新
✔ 原生支持 ES6 Modules
✔ 支持文件变更监听
✔ 最适合前端 UI 组件、动画、ESM 项目预览

方法二：使用我们提供的脚本

1. 下载项目文件（已内置运行脚本），本地解压。

2. 启动本地服务器

   方式一：使用Node.js脚本（推荐，跨平台）

   			node start-server.js
   # 或指定端口
   node start-server.js --port 3000
   
   		

   方式二：使用Shell脚本（Linux/macOS）

   			./start.sh
   # 或指定端口
   ./start.sh 3000
   
   		

   方式三：使用批处理脚本（Windows）

   			start.bat
   # 或指定端口
   start.bat 3000
   
   		

   或者使用简化版：

   			start.cmd
   # 或指定端口
   start.cmd 3000
   
   		

   方式四：使用Python（如果已安装，跨平台）

   			python3 -m http.server 8080
   # Windows 上也可以使用
   python -m http.server 8080
   
   		

3. 访问项目

   打开浏览器访问： http://localhost:8080/