这期挑战，我选择了一个自己最爱的comfort food——Biryani（印度香饭），围绕它打造了一个交互式落地页，把这道美食的历史、地域流派和文化故事，变成了一段可点击、可触摸、可玩的视觉旅程。 整个页面包含以下几个核心模块： 一个用CSS绘制的写实风格Biryani手抓饭锅作为Hero视觉 一条互动时间线，梳理Biryani从宫廷到民间的历史演变 ️ 印度各地Biryani流派展示，从Hyderabadi到Lucknowi逐一介绍 ️ 一个"Biryani风味地图"，把不同地区的香料偏好和烹饪方式铺开在地图上 可翻转的趣味知识卡，藏着关于Biryani的小冷知识 一个"转动锅子"的互动转盘，随机帮你选出今天该吃哪种Biryani ✨ 滚动动画与交互UI细节贯穿全页 响应式设计，适配不同屏幕尺寸 在设计方向上，我不想让它看起来像一个传统的信息型网站，而是希望页面呈现一种温暖、俏皮、充满食物烟火气的气质。整个页面的视觉基调从香料出发：奶油白、藏红花黄、辣椒红、玛萨拉棕——这些颜色既是Biryani的组成部分，也奠定了整页的叙事情绪。 我最享受的一个环节，是用纯CSS去画那口Biryani手抓饭锅。没有使用静态图片，而是通过渐变、阴影、层叠结构、米粒纹理、香草点缀、肉块造型、金属质感，再加上动态蒸汽效果，一点一点把一口餐厅级的手抓饭锅"煮"了出来。这个过程让我重新理解了CSS作为绘图工具的潜力：它不只是用来排版的，它真的可以画出一顿饭。 为了让页面更有探索欲，我加入了翻牌问答和互动转盘这两个小玩法。翻牌卡片能激发好奇心，转盘则带有随机性和游戏感，两者相辅相成，让访客从"观看者"变成"参与者"。 这次挑战让我意识到，做前端设计不只是让页面"好看"。我更关注的是这几件事：建立清晰的视觉层级、让每个交互都有它的目的、用CSS创造插画感、保持整个页面视觉语言的一致性，以及最终把一次浏览变成一段叙事体验。 这个项目最大的收获，是学会用前端的语言去讲一个关于食物的故事——从一口锅开始，延伸到整个印度次大陆的餐桌。这是代码与美食的一次奇妙交汇。 项目地址： [https://delicate-sunburst-b67e2e.netlify.app/] 代码仓库： [https://github.com/Mahadarshini/briyani]
热门跟贴