前端代码：苹果风产品功能展示动画效果

产品特性折叠演示

基于原生 details/summary 的折叠组件示例，结合 interpolate-size 平滑高度动画、主题切换与分屏图示同步。适合产品卖点、FAQ 或技术亮点展示，无框架依赖，开箱可用。

模板亮点

• 原生可访问：利用 details/summary 实现折叠，无 JS 也可用。
• 平滑动画：interpolate-size 让高度从 auto 到展开顺滑过渡，附带自定义时序的小回弹。
• 交互控制：上一条/下一条/退出按钮切换当前打开的卡片；Tweakpane 面板可开关调试与主题。
• 视觉分屏：右侧多张配图随卡片切换，用于展示产品不同视角或截图。
• 品牌露出：示例含 “KS主题” 徽章，可替换为自有品牌。

适用人群与场景

• 产品/营销页：展示核心卖点、规格或操作指引。
• FAQ/帮助中心：用平滑动画提升阅读体验。
• 课程/演示：讲解原生折叠、interpolate-size、:has 选择器与 Tweakpane 调试的示例。

设计与色彩

• 背景：浅/深主题可切换，网格叠加提升科技感。
• 配图：多张渐进缩放的设备/界面截图，突出左右分屏对比。
• 图标：简洁线性加号与导航箭头，保持克制风格。

文件结构

• index.html：页面结构、中文文案、按钮与图片列表，含 KS主题 徽章。
• style.css：动画、布局、主题切换、调试层与品牌样式。
• script.js：Tweakpane 配置、theme/debug 切换、折叠导航逻辑（ES6 module）。

使用方式

1. 直接打开 index.html 预览（需联网获取 CDN：Normalize、GSAP、Tweakpane）。
2. 调整文案或图片：修改 details 内容与右侧图片地址。
3. 品牌替换：编辑顶部徽章文字/链接。
4. 动效定制：在 style.css 调整 timing 或插值，在 script.js 修改默认主题与调试开关。

本地运行教程

本项目使用了 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/