中医文化主题网站

中医文化主题网站

一、项目简介

本项目是一个以中华传统中医文化为主题的大作业静态展示网站，采用 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        # 项目演示录屏

获取完整源码

• 网站：AI源码
• 本项目详情：https://www.aiyuanma.vip/posts/homework-zhongyiwenhua-white-theme