每个人心中都有一个深夜食堂。你的故事，就是最好的那道菜。
作品简介
深夜食堂·中国篇，一个关于中国深夜美食的情感故事页。四道来自中国各地的深夜美食，四个关于温暖、思念与人情味的故事。每道食物均使用纯 CSS 手绘插图，无任何 AI 生成图片或 SVG。
| 美食 | 地域 | 情感关键词 | 时间 |
|---|---|---|---|
| 热汤牛肉面 | 兰州 | 温暖治愈 | 凌晨 2:00 |
| 姥姥的饺子 | 山东 | 家的记忆 | 除夕夜 |
| 路边烧烤摊 | 北京望京 | 人间烟火 | 凌晨 1:00 |
| 妈妈煮的汤圆 | 江南 | 离别与团圆 | 凌晨 5:00 |
技术亮点
-
纯 CSS 手绘食物插图：牛肉面碗+面条波浪动画、饺子褶皱纹理+蘸料碟、烧烤火焰跳动+火星粒子、汤圆桂花糖水——全部由 CSS
div+ 渐变 +@keyframes构成，零 SVG、零 canvas、零 AI 图片 -
完美可访问性：
skip-link跳过导航、ARIA 标签全标注、Tab 键盘完整导航、prefers-reduced-motion尊重用户系统偏好 -
情感化叙事设计：每道食物搭配 150+ 字第一人称深夜故事，便签留言墙 + 互动分享表单（XSS 安全，
textContent只写） -
响应式 + 中国风：移动端竖排 / 桌面端交替横排自适应，
clamp()弹性字体，暖米色纸纹背景、中国红+烫金配色、灯笼 CSS 动画、Ma Shan Zheng手写字体 +Noto Serif SC衬线排版
纯 CSS 插图细节
🍜 牛肉面
5 层渐变红釉碗身 + 金色回纹装饰、6 根面条 noodle-wave 波浪动画（各有独立相位）、3 块牛肉高光纹理、溏心卤蛋、葱花圈、辣椒圈、3 朵祥云蒸汽浮动
🥟 饺子
竹编草垫 + 花瓣纹瓷盘、6 个不同角度饺子（各有独立旋转角度和 ::before 12 道褶皱纹理）、蘸料碟（酱油 radial-gradient）+ 葱花
🍢 烧烤
火焰背景 radial-gradient + fire-flicker 闪烁动画、5 簇 flame-dance 跳动火焰、5 个 spark-fly 火星粒子、两串烤肉（羊肉块 + 青椒 + 红椒交替），竹签带木纹渐变
🍡 汤圆
4 个汤圆 radial-gradient 球体高光、桂花花瓣点缀（4 朵金色小花）、淡黄桂花糖水汤面
Live Demo
Built with love, pure CSS, and zero AI imagery.
DEV Frontend Challenge: Comfort Food Edition · August 2026 · Perfect Landing track
Top comments (0)