1、立项原因
独立艺术家与中小画廊长期缺乏低成本、高审美的线上作品集展示方案。市面模板多为厚重商务风或花哨堆砌，与当代艺术"克制、留白、让作品说话"的调性不符；定制开发动辄数万元，且依赖服务器与数据库维护，个人艺术家难以承受。本项目旨在打造一个零后端、零数据库、双击即可打开的纯静态作品集网站，艺术家无需任何技术背景即可部署上线，用最低成本获得媲美获奖网站（Awwwards 级）的视觉呈现，用于客户预览、作品收藏沟通及电商平台（闲鱼等）宣传素材的截图录屏。
2、行业场景
面向当代艺术家、自由插画师、摄影师、雕塑工作室及中小型画廊。典型业务场景：艺术家在承接收藏委托、展览邀约或商业合作前，需向策展人、藏家、品牌方展示个人作品全集与创作脉络；画廊主理人需快速搭建可分享的线上展厅；创作者需在闲鱼、小红书等平台发布网站录屏作为引流素材。网站覆盖作品浏览（瀑布流+灯箱细看）、分类检索（油画/水彩/摄影/雕塑）、艺术家背景介绍（展历时间线）、合作意向收集（前端校验表单）四个核心环节，PC 与手机端均自适应。
1、具体功能模块
- 首页沉浸展示模块：全屏电影级 Hero 首屏、超大宋体标题逐字揭幕动画、横向跑马灯、编号精选作品左右交替排版、艺术家简介预告、巨型页脚。
- 瀑布流画廊模块：CSS 三列瀑布流网格，12 件作品高度自然交错；图片懒加载 + shimmer 微光骨架占位；hover 时饱和度缓慢提升、轻微放大并柔和抬升、底部浮现标题与年份。
- 作品分类筛选模块：全部/布面油画/纸上水彩/银盐摄影/雕塑五类标签，点击时旧项淡出、新项淡入平滑过渡，无需刷新。
- 图片灯箱预览模块：点击作品弹出全屏灯箱，深色蒙版渐暗 + 大图平滑放大，显示标题、年份、材质、尺寸；支持上一张/下一张按钮、键盘左右方向键切换、ESC 或点击蒙版关闭，关闭时反向动画。
- 艺术家介绍模块：肖像大图、宋体引言区、创作脉络正文、工作室场景图、竖向展历时间线。
- 联系表单模块：姓名/邮箱/主题/留言四项，前端实时校验，错误内联提示+表单抖动反馈，提交成功显示确认提示，数据不存储不发送。
- 全局体验模块：页面载入幕布动画、自定义混合差异光标（悬停放大）、磁吸按钮、滚动触发元素交错浮现、图片遮罩揭幕、导航滚动毛玻璃化、移动端汉堡全屏菜单。
2、主要功能描述
网站基于 HTML5 + TailwindCSS + 原生 JavaScript 开发，无后端、无数据库、无构建步骤。配色采用米白（#F7F4EF）+深灰（#4A4A4A）+木棕（#9D8161）三色系统，主字体思源宋体、辅助字体 Inter，严格 8px 栅格。全部颜色、间距、字体、缓动曲线以 CSS 变量集中定义，方便替换品牌风格。作品图通过 AI 艺术摄影接口统一生成暖调占位图，并以 clip-path。响应式覆盖 PC（三列）、平板（两列）、手机（单列+汉堡菜单），并尊重系统"减少动态效果"无障碍设置。
技术架构：纯静态四页面结构（index/gallery/about/contact.html）+ 共享样式文件（assets/styles.css），通过原生 CSS 变量构建设计令牌体系。动画使用 CSS keyframes + IntersectionObserver 实现，无重型动画库，保证加载流畅。图片懒加载、灯箱、筛选、表单校验均为原生 JS 实现，总代码量轻量。
评论