[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-967":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":35,"readmeContent":36,"aiSummary":37,"trendingCount":16,"starSnapshotCount":16,"syncStatus":15,"lastSyncTime":38,"discoverSource":39},967,"AI_Animation","Unclecheng-li\u002FAI_Animation","Unclecheng-li","本项目整理了用于生成[炫酷 HTML 动画网页]的 AI Prompts，涵盖动画效果、3D 可视化、PPT 风格演示、UI 美化等多个类别。","",null,"HTML",667,57,1,2,0,32,56,164,96,9.29,"MIT License",false,"master",true,[27,28,29,30,31,32,33,34],"css","css3","front-end","html5","html5-css3","html5-css3-javascript","javascript","ppt","2026-06-12 02:00:21","# AI Animation\n\n> 使用 AI 生成 HTML 演示动画的 Prompt 模板集合\n\n[English](README.md) · [Prompts](prompt.md)\n\n---\n\n## 项目简介\n\u003Cimg width=\"2560\" height=\"1440\" alt=\"QQ_1775901765825\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F77ee698e-7e88-43b7-b048-8eed006ed278\" \u002F>\n\u003Cimg width=\"2560\" height=\"1440\" alt=\"QQ_1775901779039\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fe06a3dc6-a57f-40f6-b88b-d4da2c049f45\" \u002F>\n\u003Cimg width=\"2560\" height=\"1440\" alt=\"QQ_1775901789295\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F657be29c-2770-46e2-8780-4d28712e3683\" \u002F>\n\n本项目整理了用于生成**炫酷 HTML 动画网页**的 AI Prompts，涵盖动画效果、3D 可视化、PPT 风格演示、UI 美化等多个类别。\n\n配合 `web_animation\u002F` 中的示例文件，可以快速生成用于：\n\n- 📹 **视频创作** — AI City 系列视频的动画演示\n- 📚 **教学演示** — 技术概念的可视化呈现\n- 🔬 **技术科普** — 网络协议、神经网络等抽象概念的图形化展示\n\n---\n\n## 目录结构\n\n```\nAI Animation\u002F\n├── README.md          # 项目说明文档\n├── prompt.md          # Prompt 模板集合（分类整理）\n├── prompt.txt         # 原始 Prompt 文本\n├── LICENSE            # MIT 开源协议\n├── UI\u002F                # UI 设计参考图\n│   ├── design1.png ~ design6.png\n│   └── timeline.png\n└── web_animation\u002F     # 示例 HTML 动画文件\n    ├── Animation\u002F              # AI\u002FML 概念演示（RNN、LSTM、Word2Vec、GPU 等）\n    ├── BG\u002F                     # 背景样式模板\n    ├── DHCP\u002F                   # DHCP 协议演示\n    ├── geometry\u002F               # 几何图形演示\n    ├── nice try\u002F               # 实验性 Demo\n    ├── Pirated websites\u002F       # 钓鱼网站演示（仅供安全教育）\n    ├── PPT Template\u002F            # PPT 风格模板（基础版，5 个）\n    │   ├── PPT cover page.html\n    │   ├── PPT-Generate-1.html\n    │   ├── PPT-Generate-2.html\n    │   ├── PPT-Generate-3.html\n    │   └── PPT-Generate-4.html\n    ├── PPT Template-level2\u002F     # PPT 风格模板（进阶版，27 个）\n    │   ├── 1.html ~ 9-3.html  # 多种布局变体\n    │   └── png\u002F                # 模板缩略图\n    ├── catch the packet\u002F       # 数据包捕获演示\n    ├── AI Model\u002F               # AI 模型演示（MLP、RNN、LSTM、GRU）\n    ├── 3D - demonstrate.html\n    ├── AI_Animation.html       # AI-Animation Skill 输出文件\n    ├── Animation\u002F         # AI\u002FML 概念演示（RNN、LSTM、Word2Vec、GPU 等）\n    ├── Pirated websites\u002F  # 钓鱼网站演示\n    ├── PPT Template\u002F       # PPT 风格模板\n    ├── catch the packet\u002F  # 数据包捕获演示\n    ├── DHCP\u002F              # DHCP 协议演示\n    ├── geometry\u002F           # 几何图形演示\n    ├── 3D - demonstrate.html\n    ├── animation.html\n    ├── ethernet-frame-animated.html\n    ├── HTTPS.html\n    ├── ipv4_datagram.html\n    ├── ipv4_datagram - 3d.html\n    ├── ppp_frame_complete.html\n    ├── router-routing-table-animated.html\n    ├── switch-mac-table-animated.html\n    └── tcp-visualization.html\n```\n\n---\n\n## 快速开始\n\n### 方式一：直接使用示例\n\n```bash\n# 克隆仓库\ngit clone https:\u002F\u002Fgithub.com\u002FUnclecheng-li\u002FAI_Animation.git\ncd AI_Animation\n\n# 在浏览器中打开任意 .html 文件\n# 使用 ← → 方向键或鼠标滚轮翻页\n```\n\n### 方式二：AI 生成新动画\n\n1. 打开 [prompt.md](prompt.md)，选择或修改合适的 Prompt\n2. 将 Prompt 发送给 AI（推荐 [Trae](https:\u002F\u002Ftrae.ai\u002F)、Claude、GPT-4o）\n3. 指定输出文件路径\n4. 在浏览器中预览\n\n**推荐 AI 工具：**\n\n| 工具 | 特点 | 适合场景 |\n|------|------|----------|\n| [Trae](https:\u002F\u002Ftrae.ai\u002F) | 免费，可直接生成 HTML | 快速生成 |\n| Claude | 长上下文，代码质量高 | 复杂动画 |\n| Codex | 图形理解能力强 | UI 重构 |\n\n### 方式三：UI 参考重构\n\n1. 在 `UI\u002F` 文件夹中选择设计风格\n2. 使用 [prompt.md](prompt.md) 中「UI 置换」类 Prompt\n3. 让 AI 参考 UI 图片进行视觉重构\n\n---\n\n## 示例预览\n\n| 文件 | 主题 | 特点 |\n|------|------|------|\n| `tcp-visualization.html` | TCP 可视化 | 3D 效果、交互演示 |\n| `ipv4_datagram - 3d.html` | IPv4 数据报 | 3D 旋转、动态展示 |\n| `router-routing-table-animated.html` | 路由表 | 表格动画、路径高亮 |\n| `Animation\u002FRNN-*.html` | RNN 神经网络 | 分步动画、概念可视化 |\n| `Animation\u002FGPU.html` | GPU 架构 | 图形化演示 |\n\n---\n\n## 技术栈\n\n- **前端**：HTML5 + CSS3 + JavaScript（原生，无框架依赖）\n- **动画**：CSS Animation \u002F Keyframes \u002F 3D Transform\n- **图表**：纯 CSS\u002FJS 图形绘制，无外部库\n- **兼容性**：现代浏览器（Chrome、Firefox、Safari、Edge）\n\n---\n\n## 开源协议\n\n本项目仅供学习和研究使用，请勿用于非法用途。\n请勿用于商业用途。\n---\n\n## 致谢\n\n- AI 工具：[Trae](https:\u002F\u002Ftrae.ai\u002F)、Claude、ChatGPT 等\n- 所有参与测试和反馈的社区成员(虽然目前还没有desuwa)\n","本项目整理了用于生成炫酷 HTML 动画网页的 AI Prompts，涵盖动画效果、3D 可视化、PPT 风格演示、UI 美化等多个类别。其核心功能包括通过预设的 Prompt 模板，配合示例文件快速生成高质量的动画网页，支持视频创作、教学演示和技术科普等场景。技术特点上，项目充分利用了现代前端技术如 HTML5、CSS3 和 JavaScript，结合 AI 生成工具（如 Trae、Claude）来提高开发效率和创意表达。适用于需要生动展示复杂概念或制作吸引人的在线演示文稿的开发者和设计师。","2026-06-11 02:40:35","CREATED_QUERY"]