HTML 大作业NEW

醴陵釉下五彩 · 非遗专题网站

醴陵釉下五彩非遗专题静态网站，六大篇章呈现窑火源流、国瓷高光、匠作七关制瓷流程等，Swiper Creative 3D 轮播与 CSS 3D 旋转画廊，宣纸朱砂传统配色，零依赖原生 JavaScript 实现。

评分:4.8/5.0

销量:82

发布:6/15/2026

难度:L3 高级

获取完整源码

演示视频仅作效果参考。完整源码、项目说明与运行答疑，请私聊沟通（适合毕业设计 / 课程设计 / 课设参考）。

获取完整源码观看演示视频

✓含项目说明文档，便于对照学习

✓可本地运行，适合课设演示

✓沟通获取后可咨询运行问题

项目封面

项目概览

醴陵釉下五彩非遗专题网站以「总览→历史→荣誉→工艺→精神→传承」六大篇章系统呈现釉下五彩文化，采用 HTML5、CSS3 与原生 JavaScript 构建，除首页 Swiper CDN 外零依赖部署。涵盖首屏 Creative 3D 轮播、历史页 CSS 3D 旋转画廊、匠作七关制瓷流程、国瓷高光与活态传承等模块，animate.js 提供滚动揭示、视差、粒子与涟漪动效，尊重 prefers-reduced-motion 无障碍设置，适合作为毕业设计中非遗文化展示、CSS 3D 动画与多页面静态网站设计的练习项目。

项目说明

醴陵釉下五彩 · 非遗专题网站

一、项目简介

本项目为醴陵釉下五彩非物质文化遗产主题的静态展示网站，采用原生 HTML5、CSS3、JavaScript 构建，无前端框架与构建工具，可直接在浏览器中打开运行。网站以「总览 → 历史 → 荣誉 → 工艺 → 精神 → 传承」六大篇章，系统呈现釉下五彩的文化脉络、制作技艺与当代发展。

二、项目功能

2.1 页面模块

页面文件	导航名称	功能说明
`index.html`	总览	首屏全屏轮播（Swiper），展示十大主题条目与代表图录，作为全站入口与内容导览
`history.html`	窑火源流	介绍醴陵陶瓷从泥土到瓷器的千年发展脉络，含 3D 旋转画廊展示历史图集
`honour.html`	国瓷高光	讲述釉下五彩在国宴、礼赠等重要场景中的代表作品与荣誉时刻
`production.html`	匠作七关	分步展示制瓷全流程：配泥、成形、素烧、彩绘、施釉、烧成、检瓷
`inheritance.html`	器映丹心	融合醴陵红色文化与瓷艺精神，探讨器物承载的时代记忆与工匠精神
`develop.html`	新生之路	介绍活态保护、数字化传承、产学协作与对外传播等当代发展路径

2.2 全站公共能力

统一导航与页眉：各子页共享 Logo、站点标题与六大篇章导航链接，当前页高亮（aria-current）
非遗视觉主题：宣纸底色、朱砂/铜金/黛青配色，云层/纸纹/烟气等背景装饰层
响应式布局：适配不同屏幕宽度，导航与轮播缩略条随断点调整
页脚快速链接：各内容页提供站点地图式跳转与版权信息

2.3 交互与动效

能力	实现位置	说明
首屏轮播	`js/index.js` + Swiper CDN	Creative 3D 切换效果，缩略条联动，自动播放，支持键盘/鼠标滚轮
3D 旋转画廊	`history.html` + `css/history.css`	CSS 3D Transform 实现的环形图片展示，含镜面反射效果
滚动揭示	`js/animate.js`	区块进入视口时渐入上浮，支持错峰延迟
标题逐字入场	`js/animate.js`	将 h1/h2 等标题拆分为单字 span，逐字动画
滚动视差	`js/animate.js`	横幅、装饰分隔线随滚动分层位移
点击涟漪	`js/animate.js`	链接与按钮点击时的国风波纹反馈
自定义光标与墨迹粒子	`js/animate.js`	精细指针设备下的跟随光标与 Canvas 粒子拖尾
角落快捷入口	`js/site.js`	回顶、本页目录面板、返回总览、锚点跳转
低动效适配	全站	尊重系统 `prefers-reduced-motion` 设置，自动降级动效

2.4 技术特点

零依赖部署：除首页 Swiper 通过 CDN 引入外，其余均为原生实现
样式分层：common.css 承载全站主题与组件，各页面.css 仅覆盖本页差异
脚本分工：index.js 负责首页轮播；site.js 负责角落导航；animate.js 负责全站动效
无障碍考量：轮播、目录面板等关键区域提供 aria-label、aria-expanded 等属性

三、标准文件夹目录结构

homework-feiyi-youwucai/
├── index.html              # 首页（总览 / 首屏轮播）
├── history.html            # 窑火源流
├── honour.html             # 国瓷高光
├── production.html         # 匠作七关
├── inheritance.html        # 器映丹心
├── develop.html            # 新生之路
├── 项目说明.md              # 本说明文档
├── bg.png                  # 全站固定背景图（common.css 引用）
│
├── css/                    # 样式目录
│   ├── common.css          # 全站公共样式（主题色、导航、页脚、背景层、角落入口等）
│   ├── index.css           # 首页首屏轮播样式
│   ├── history.css         # 历史页 3D 画廊样式
│   ├── honor.css           # 国瓷高光页样式
│   ├── production.css      # 匠作七关页样式
│   ├── inheritance.css     # 器映丹心页样式
│   └── develop.css         # 新生之路页样式
│
├── js/                     # 脚本目录
│   ├── index.js            # 首页 Swiper 轮播初始化
│   ├── site.js             # 全站角落快捷入口（回顶 / 目录面板）
│   └── animate.js          # 全站动效（揭示、视差、粒子、涟漪等）
│
└── img/                    # 图片资源目录
    ├── logo.jpg            # 站点 Logo
    ├── show1.png ~ show10.png   # 首页轮播展示图
    ├── change1.png ~ change5.png # 历史页 3D 画廊图
    ├── m1.png ~ m8.png     # 制作工艺步骤配图
    ├── maoci1.png / maoci2.png  # 国瓷作品图
    ├── r2.png / r3.png / r5.png # 红色文化旧址图
    ├── d1.png / d2.png     # 传承发展案例图
    └── …                   # 其他页面配图

3.1 目录约定说明

目录/文件	职责
根目录 `*.html`	每个 HTML 文件对应一个独立页面，通过 `<nav>` 互相链接
`css/common.css`	必须先于页面专属 CSS 引入，提供变量、重置、公共组件
`css/<页面名>.css`	仅编写该页面特有布局与视觉，避免污染全站
`js/index.js`	首页轮播逻辑；部分子页 header 内也引入，用于导航相关兜底
`js/site.js`	依赖 `.c-corner` DOM 结构，在含角落入口的页面底部引入
`js/animate.js`	内容页底部引入，自动扫描页面元素并挂载动效
`img/`	统一存放位图资源；HTML/CSS 中以相对路径 `img/xxx` 引用
`bg.png`	置于根目录，由 `common.css` 的 `url("../bg.png")` 引用