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

产品特性折叠演示

基于原生 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 修改默认主题与调试开关。

本地运行教程