这是我的 Frontend Challenge: Comfort Food Edition 参赛作品，主题是“CSS Art: Comfort Food”。作品用纯CSS动画，让一套 thattu vadai set 在报纸上自己组装，每11秒循环一次，全程不写一行JavaScript。 Thattu vadai set 是印度泰米尔纳德邦Salem街头常见的小吃。两只油炸米面脆饼，一只抹上绿酸辣酱，另一只抹上红辣椒罗望子酱，中间夹一大把用柠檬汁拌过的甜菜丝、胡萝卜丝和生洋葱。它是一个需要站着吃的三明治，而且从做好到变软，只有大约九十秒。 所以我不想画它。静态的 thattu vadai set 看起来只是一个米色的圆盘，这道菜的灵魂不在最终的形态，而是摊主在折叠桌前二十秒内把它组装出来的过程。我的作品因此选择了组装本身： 报纸铺开 → 脆饼落下 → 酸辣酱抹开 → 蔬菜沙拉散落 → 花生和 boondi 撒下 → 酸辣酱从缝隙挤出 → 上层的脆饼合拢。 整个场景被一颗灯泡照亮，时间是夜晚。这并非出于氛围考虑。我查了Salem所有能在网上找到营业时间的 thattu vadai 摊位，没有一家在下午四点钟之前开门；大多数在十一点前打烊，还有几家星期日干脆不营业。它结构上就是属于夜晚的食物，所以画面理所当然被放在夜里。 制作中遇到的最大难题，是让油炸脆饼看起来不像一只木碗。我的第一版非常失败：用同心的尖头叉印做装饰，透明度设为0.13，加上一圈向边缘变暗的径向渐变，再沿底部内侧放一道内阴影。单独看每一样都是合理的手法，但它们叠在一起，就组成了沙拉碗上的木纹效果。 修复的方式只有三种，而且都是做减法： ```css /* 叉印压到几乎不可见——thattai 上确实有这些纹路， 但只要稍微明显一点，就会被视为木纹 */ repeating-radial-gradient(circle at 50% 50%, rgba(120,66,20,.05) 0 1px, transparent 1px 15px), /* 面饼保持平实，去掉过度的边缘过渡 */ radial-gradient(circle at 44% 40%, #F0C888 0%, #E2AF60 58%, #D1... ``` 去掉叉印的强度、去掉多余的立体阴影、去掉过分平滑的渐变——画面里的脆饼终于不再像木头，而像一块刚从油锅里捞起来、还带着不均匀气泡的炸米饼。整个动画只有这一件事：让食物在黑暗的街边，自己完成一次二十秒的组装，然后循环，永不结束。没有JavaScript。
热门跟贴