SuperAPI AI 工具集

html-slides

前端与建站

查看项目

更新于 10-16 09:53

技能介绍

用途:当用户要求创建 HTML 幻灯片、生成 HTML 演示、制作动画幻灯片、构建交互式幻灯片或网页幻灯片时使用,生成单文件自包含的 HTML 演示文稿。

主要能力:单文件结构,内联 CSS 与 JS,无需构建工具;每张幻灯片锁定 100vh/100dvh 且 overflow: hidden,内容超出时拆分幻灯片;通过 :root CSS 自定义属性统一主题;CSS 优先动画,默认使用 .reveal 配合 Intersection Observer 触发,缓动为 cubic-bezier(0.16,1,0.3,1);按需加载 GSAP 与 ScrollTrigger 实现时间线编排、SplitText 字词揭示及滚动导航;支持键盘(方向键、空格、Page Up/Down)与触摸滑动导航;支持 Mermaid 图表、Prism.js 代码高亮、PDF 打印导出、混合背景主题及 contenteditable 内联编辑。

关键约束:必须应用 assets/viewport-base.css 的视口基础样式;标题使用 clamp 响应式字号并加载 Web 字体;图片最大高度受 min(50vh, 400px) 限制;需支持 prefers-reduced-motion;特性网格不超过 6 项;不可在幻灯片内滚动。

配套资源:references/html-template.md 提供完整模板,references/animation-patterns.md 提供动画配方,scripts/extract-pptx.py 可从 PPTX 提取文本、图片和备注为 JSON。

限制:资料未提供收费、价格、平台与效果保证等信息;实际运行依赖浏览器对相关 CSS 与 JS 特性的支持。