前端代码：创意折叠面板，丝滑的动态效果

一个“仅单项展开”的折叠组件：边框、位移、景深、模糊都可调，支持深浅主题，适合产品卖点、FAQ 或多步说明的层次展示。

模板亮点

• 独占展开：同名 <details> 限制一次只开一项，避免信息拥挤。
• 多重形变：可配置边框厚度、上下错层、景深与内容模糊，营造立体层次。
• 主题切换：支持 light/dark/system，边框与高亮随主题自适应。
• 可视化控制：内置 Tweakpane 控制面板（配置项已中文化），方便调试与演示。
• 品牌露出：顶部集成 “KS主题” 徽章，可替换为自有品牌链接。

适用人群与场景

• 产品/营销页：卖点列表、方案对比、流程说明。
• FAQ/帮助中心：分组折叠，保持页面清爽。
• 课程/演示：展示 <details> 进阶用法、形变动画和调试面板。

设计与色彩

• 背景：浅/深模式可切换，边框与高亮自动适配。
• 版式：卡片式折叠，图标+标题+加号按钮，内容默认半透明/模糊，展开时显色。
• 动效：使用 linear() 自定义缓动，展开时边框、高亮、错层与内容同步过渡。

文件结构

• index.html：结构与中文文案，包含 KS主题 徽章与折叠项。
• style.css：布局、动效、错层/景深、主题与品牌样式。
• script.js：Tweakpane 控制面板（ES6 module，引自 CDN），同步配置到 CSS 变量。

本地运行教程

使用方式

1. 在http协议下打开 index.html 预览（需联网加载 Normalize、GSAP、Tweakpane）。
2. 替换文案/图标：编辑各 <details> 内的标题与描述；如需增减条目，保持相同结构即可。
3. 调整样式：在 script.js 控制面板或 style.css 修改边框宽度、模糊、不透明度、错层距离与动画速度；可自定义主题色或关闭高亮。