北京
這是我的 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。
特別聲明：以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布，本平臺僅提供信息存儲服務。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
