Amma 的厨房：写给南印度家常菜的情书落地页
来源：dev.to — 2026-08-03
📋 概述
这是 Frontend Challenge 治愈美食主题的 Perfect Landing 参赛作品。“Amma”在泰米尔语中是“母亲”，作者为虚构的南印度餐厅打造了一封献给家乡食物的情书式落地页。页面亮点是零图片：南印度塔利、5 道 CSS 食物插画、Dosa、厨房场景全部由纯 CSS（2680 行）绘制，配以滚动浮现、蒸汽升腾、视差等微动画，还内置了 15 道菜的交互菜单和可用的预订表单。
🔑 核心要点
- 零图片纯 CSS：塔利铜盘、Dosa、厨房场景等所有视觉均用渐变、box-shadow、border-radius 手工绘制
- 食材取色：配色直接取自真实香料——姜黄金、咖喱叶绿、辣椒红、黏土棕，营造南印家庭氛围
- 交互菜单：15 道正宗南印菜，分早餐/主食/小吃/甜点/饮品五类可筛选
- 完整预订表单：含日期选择、人数选择与动画确认反馈
- 微动画细节：塔利缓慢漂浮并响应鼠标视差，蒸汽持续升腾增强沉浸感
💡 金句
Built with ❤️ and a craving for sambar rice.
👍 0
👎 0
← 返回 Dev.to 首页