中医文化主题网站源码html源码
一、项目简介
本项目是一个以中华传统中医文化为主题的大作业静态展示网站，采用 HTML + CSS + JavaScript 实现，无需后端。网站包含入口太极互动、首页轮播与关键字云、中医简史时间轴、十大名医、养生疗法、百味中药与关于作者等模块，白色主题版界面清新典雅，适合课程设计、文化展示与前端静态页学习。
一、功能介绍
1. 入口页（index.html）
- 太极 Canvas 互动：鼠标移动可驱动太极图旋转与八卦镂空放大层。
- 五幅装饰图入场动画：八卦旋转淡入、两侧图文依次滑入、边缘图文交替闪烁。
2. 网站首页（page1.html）
- 顶部导航：七栏菜单，当前页高亮，中心 Logo 悬停旋转归位动效。
- 轮播图：自动播放与左右箭头切换，指示圆点可点击跳转。
- 中医简介：竖排文字与旋转装饰图展示。
- 关键字云：17 个关键词球体错峰呼吸缩放，悬停暂停并高亮。
- 四大经典：卡片悬停翻转展示书名与简介。
- 本草纲目：图文对照介绍。
3. 中医简史（page2.html）
- 页头 Banner：简史导语、配图与医改政策要点列表。
- 发展特点：三栏图文（整体观念、辨证论治、天人合一）展示。
- 朝代时间轴：左侧朝代锚点导航（滚动联动高亮），右侧各朝代沿革条目。
4. 十大名医（page3.html）
- 名医卡片网格：悬停翻转遮罩，显示姓名、称号与「查看更多」锚点链接。
- 名医详情：图文分栏介绍十位历代名医生平与学术贡献。
5. 中医养生（page4.html）
- 疗法轮播：理疗、推拿、针灸、拔罐、刮痧五类，单选切换带动图文入场。
- 养生视频：嵌入 B 站视频，左右图文交替排版。
6. 百味中药（page5.html）
- 药材网格：28 味药材图示，随机高亮与鼠标悬停展示药性简介。
- 常见方剂：蜜丸、散剂、膏滋、药酒、药膳五类方剂图文介绍。
7. 关于作者（page6.html）
- 三位作者信息卡片：头像悬停旋转，展示姓名与简介。
8. 全站通用动效
- 导航图标、链接、卡片、图片等 hover 交互反馈。
- 主要区块滚动进入视口时的淡入上浮入场动画。
二、文件目录
homework-zhongyiwenhua-white-theme/
├── index.html # 入口页（太极互动）
├── page1.html # 网站首页
├── page2.html # 中医简史
├── page3.html # 十大名医
├── page4.html # 中医养生
├── page5.html # 百味中药
├── page6.html # 关于作者
├── yi.ico # 网站图标
├── 项目说明.md # 本说明文档
│
├── CSS/
│ ├── common.css # 全站公共样式（导航、版心、重置）
│ ├── animations.css # 全站通用动效（hover、滚动入场）
│ ├── index.css # 入口页样式
│ ├── page1.css # 网站首页样式
│ ├── page2.css # 中医简史样式
│ ├── page3.css # 十大名医样式
│ ├── page4.css # 中医养生样式
│ ├── page5.css # 百味中药样式
│ ├── page6.css # 关于作者样式
│
├── JS/
│ ├── animate.js # 缓动位移工具函数
│ ├── circle.js # 入口页太极 Canvas 交互
│ ├── index.js # 首页轮播逻辑
│ ├── random.js # 药材格随机高亮与悬停提示
│ ├── scrollMenu.js # 简史页朝代导航滚动联动
│ └── scrollReveal.js # 全站滚动入场动效
│
├── images/ # 图片资源（按页面分子目录）
│ ├── page1/ # 首页轮播、关键字、经典等
│ ├── page2/ # 简史 Banner、特点图等
│ ├── page3/ # 十大名医头像
│ ├── page4/ # 养生疗法插图
│ ├── page5/ # 药材与方剂配图
│ ├── page6/ # 作者头像
│ ├── index/ # 入口页八卦装饰图（1--5.png）
│ └── ... # 公共素材（导航图标、背景等）
│
└── 演示材料/
└── 演示视频.mp4 # 项目演示录屏