中国神话故事馆

探寻华夏文明中的瑰丽传说 — 一个交互式的中国神话故事展示小工具

项目简介

中国神话故事馆是一个基于纯前端技术构建的交互式 Web 应用，精选五个经典中国神话故事，以故事卡片和 CSS 动画效果视频的形式呈现，让用户在浏览中感受华夏文明的魅力。

包含的故事

故事	主题	动画效果
嫦娥奔月	月亮、仙药、离别	拟人嫦娥长袖轻舞、衣袂飘飞，云雾宫殿、玉兔跳跃、花瓣飘落、后羿仰望
女娲补天	五色石、拯救、创世	人首蛇身的女娲盘旋升腾、双手托举五色石补天、天穹裂缝闪烁、洪水翻涌
精卫填海	执着、坚韧、大海	白首红足的精卫鸟展翅衔石投海、浪花激起、夕阳余晖、海浪潮涌
夸父逐日	勇气、追求、桃林	光头巨人夸父大步奔跑、挥杖追赶烈日、汗珠飞溅、尘土飞扬
后羿射日	英雄、射箭、救世	束发武士后羿弯弓搭箭、九日并出、箭矢破空、太阳应声坠落

技术栈

• HTML5 — 语义化结构，故事导航与卡片布局
• CSS3 — 纯 CSS 动画 + 内联 SVG 拟人角色实现效果视频（无视频文件依赖），响应式设计
• JavaScript — 交互逻辑，故事切换与卡片展开

功能特性

1. 故事卡片 — 每个故事配有精美卡片，点击可展开查看详情和标签
2. 效果动画 — 内联 SVG 拟人角色 + CSS 动画还原经典神话场景，模拟"效果视频"体验
3. 导航切换 — 顶部导航按钮可快速切换故事，联动动画和卡片
4. 响应式设计 — 适配桌面和移动端浏览
5. 星空背景 — 动态星空背景营造神话氛围

快速开始

# 进入项目目录
cd chinese-mythology

# 启动本地服务器
python3 -m http.server 3000

# 浏览器访问
open http://localhost:3000

项目结构

chinese-mythology/
├── index.html    # 主页面（故事导航、动画场景、故事卡片）
├── style.css     # 样式与动画（星空背景、5个故事场景动画、卡片样式）
├── script.js     # 交互逻辑（导航切换、卡片展开、场景联动）
└── README.md     # 项目文档

设计理念

本项目以"传承华夏文明，弘扬传统文化"为理念，通过现代 Web 技术重新演绎古老神话。每个故事的动画效果都经过精心设计，力求在视觉上还原神话场景的意境：

• 嫦娥奔月 — 以金色月光和飘飞的花瓣营造月宫的孤寂之美
• 女娲补天 — 以裂缝光效和五色石升空展现补天的壮举
• 精卫填海 — 以涌动海浪和飞翔小鸟体现执着的精神
• 夸父逐日 — 以脉动太阳和奔跑身影传递追求的勇气
• 后羿射日 — 以多日并出和箭矢飞射再现射日的震撼

License

MIT