从创意到发布：中国神话故事馆开发实战全记录

技术路线 · 技术心得 · 实战经验 · 存在问题与优化空间 —— 一次完整的 AI 辅助开发 + 作品发布全流程分享

一、项目背景

参加码道（CodeArts）高校训练营期间，我负责开发和发布一个互动式文化展示工具。最终落地的项目是「中国神话故事馆」——一个基于纯前端技术、用 CSS 动画模拟效果视频的交互式 Web 应用，精选嫦娥奔月、女娲补天、精卫填海、夸父逐日、后羿射日五个经典神话故事。

这个项目的特别之处在于：它不仅要展示故事内容，还要体现"科技 + 文化"的融合，让传统文化以现代技术形态被重新演绎。

二、技术路线

2.1 整体架构

项目采用纯前端三层架构，零后端依赖、零外部资源加载：

2.2 关键设计决策

为什么用 CSS 动画而非视频文件？

这是本项目最核心的技术决策：

1. 零依赖 — 任何浏览器原生支持 CSS 动画，无需视频编码/解码，没有格式兼容问题
2. 极小的体积 — 整个项目仅 3 个文件（HTML+CSS+JS）约 20KB，一个视频文件动辄数 MB
3. 强交互性 — 动画和用户操作实时联动，切换故事时场景即时变化，视频做不到
4. 易维护 — 改动画效果只需调 CSS 参数，不需要重新渲染导出视频

2.3 动画实现技巧

每个故事场景用 @keyframes + 独立的 CSS 类实现：

• 嫦娥奔月：月亮用 transform: translateY 上下浮动；仙女用 bottom 属性模拟飞升；花瓣用 rotate + opacity 组合下落
• 女娲补天：裂缝用 linear-gradient + box-shadow 光效；五色石用 bottom 属性逐色升空（stagger 时序）
• 精卫填海：海浪用两个半透明椭圆 + translateX 往复；小鸟用四个关键帧做环形飞行
• 夸父逐日：太阳 scale 脉动；夸父 left 属性往复奔跑；尘土用 scale + opacity 渐隐
• 后羿射日：九个太阳 opacity + scale 序列一闪（模拟被射落）；箭矢用 width 增长 + left 位移

通用技巧：

• 同一场景多元素用不同 animation-delay 实现错落节奏
• 优先用 transform/opacity 这两个合成器属性，避免触发重排
• 星空背景用 radial-gradient 拼出星点 + background-position 漂移

三、技术心得

3.1 产品思维：先有"感受目标"，再定技术方案

做文化展示类项目，最重要的是氛围。我先把目标定成"让用户一进页面就置身浩瀚星空"，然后倒推技术方案：深蓝到深紫的渐变背景营造夜幕、金色主色调呼应神话的贵气、固定定位的星星背景营造空间纵深、右上角月光晕做呼吸动画。技术是手段，感受才是目的。

3.2 交互设计：双向联动的一致性体验

用户可能从两个入口操作：点导航按钮、或点故事卡片。无论哪个入口，都要保持体验一致——场景动画切换、卡片高亮、详情展开三个动作必须同步。这在 JS 里用两个事件监听器实现同一套状态更新逻辑。

3.3 无外部依赖的纯粹性

这个项目从开始就立了个"军规"：不引外部库、不引外部资源。这个约束反而逼出了很多创造性方案，也让项目在任何环境下都能秒开，对"作品展览"场景非常友好。

四、实战经验

4.1 开发阶段的关键经验

1. 动效参数化：每个动画的时间、位移、透明度都单独定义成变量，方便统一调整
2. 场景隔离：5 个动画场景虽然共用一个容器，但每个场景的动画类名独立，display 切换时互不干扰
3. 移动端适配：用 grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) 做卡片自适应；小屏下调低动画容器高度，避免元素溢出

4.2 发布阶段的踩坑记录

发布到华为云高校运营平台（作品展览馆）的过程，比开发本身更有"实战感"：

1. CJK 字体缺失：无头浏览器截图时中文显示为豆腐块，花了不少时间排查。最终方案是从 Google Fonts 下载 Noto Sans SC TTF 放入用户字体目录并刷新 fontconfig 缓存
2. Chromium 依赖缺失：headless shell 启动失败，提示缺 Glibc/nss 等十几个依赖库。由于沙箱环境特殊（无 apt），改用 yum --installroot 将依赖装到独立目录，再通过 LD_LIBRARY_PATH 注入
3. 门禁机制：平台的发布流程内置多道门禁（预检、编码、截图、字形校验、门禁时效），必须逐项通过才能发布。注意门禁标记文件有 1 小时时效，版权产物也要及时刷新，否则会卡在"标记过期"
4. 隧道与预览：为了让评审能看到实时效果，需要用 DevBridge 建立公网隧道；gitUrl 必须是无凭证的 https URL、以 .git 结尾，否则发布接口校验不通过

4.3 用到的工具链

五、存在问题与优化空间

5.1 当前存在的问题

1. 动画深度不足：CSS 动画的"效果视频"较抽象，人物动作是几何色块，缺少细节
2. 无音效：没有背景音乐和音效，氛围渲染打折扣
3. 内容局限：仅 5 个神话故事，覆盖面有限
4. 无障碍支持缺失：未添加 ARIA 标签，动画未适配 prefers-reduced-motion
5. 单语言：仅中文，未考虑国际化

5.2 优化空间

短期（技术增强）：

• 引入 SVG 路径动画，让人物动作更真实
• 用 Canvas/WebGL 做粒子特效（嫦娥的花瓣、夸父的尘埃）
• 加 Web Audio API 生成环境音效（风声、海浪声、鸟鸣）
• 加 prefers-reduced-motion 媒体查询，尊重用户减少动效的偏好

中期（内容扩展）：

• 扩充到盘古开天、伏羲画卦、神农尝百草、大禹治水等更多经典
• 增加故事搜索、收藏、分享功能
• 支持英文等多语言切换

长期（形态演进）：

• 从"展示工具"升级为"互动学习平台"，加故事朗读、知识问答
• 结合 AI 生成个性化故事解读
• 接入数字人讲解，做成可视化的传统文化数字体验馆

六、总结

「中国神话故事馆」是一个小而完整的项目：从创意构思、架构设计、代码实现到作品发布，全流程跑通。它验证了一个重要观点——用最朴素的技术（甚至零依赖），也可以做出有感染力的作品，关键在于把"感受目标"想清楚，再把 AI 变成最强的加速器。

让人真正成长的不是技术的堆砌，而是把这个过程完整走一遍：踩坑、排查、修复、复盘、沉淀。

本文由码道（CodeArts）AI 编程助手辅助产出，欢迎交流指正。
项目地址：https://gitcode.com/Eddygit/chinese-mythology