北京
这是一篇参加 Frontend Challenge — Comfort Food Edition（CSS Art）的投稿。 ## 灵感：舒适食物是那些小东西 对我来说，舒适食物从来不是一大盘什么，而是那些小小的瞬间——比如站在柜台前，因为等不及坐下就站着吃掉的那块点心。所以我决定画一家面包店。 然后我冒出一个念头：如果柜子里每一样点心都是一只猫呢？ 这个决定被证明是对的。九只猫，而不是九块甜点——角色永远比静物好玩得多。 ## 九位猫主角 柜台里住着九只猫： - 长着耳朵的马卡龙 - 抹茶纸杯蛋糕 - 鲷鱼烧 - 爪印曲奇 - 巧克力甜甜圈（糖针多到过分） - 蛋糕切件 - 棒棒糖蛋糕 - 焦糖布丁杯 柜台上方还有一整只猫咪蛋糕，需要提前 48 小时预订。 我也不希望画面只是一个孤零零的物体飘在背景上。我想做一个你能站进去的房间。于是有了饮料黑板、架子上的罐子、吊灯、木质柜台，还有一只店猫，正趴在某人那杯注定会凉掉的咖啡旁边呼呼大睡。 ## 演示 没有图片。没有 SVG。没有 Canvas。没有 JavaScript。每一根胡须都是一段带 border-radius 的 div。 有三处交互值得动手试试： 1. **悬停、点击或 Tab 到任意点心**——它会从柜台里浮起来，带上一张价格标签。 2. **点击睡觉的店猫**——她会睁开眼睛、竖起耳朵、呼噜几秒，然后再睡过去。 3. **地板上有团毛线**——点它捡起来，再点猫递给她，看看会发生什么。 ## 实现旅程：一套坐标系，零断点 第一个关键决策是如何让 CSS 画作自适应缩放。CSS 艺术里有几百个坐标，如果每个断点都维护一套变体，那会是一场噩梦。 所以整个场景只有一个容器： ```css .scene { container-type: inline-size; aspect-ratio: 16 / 10; } ``` 里面的所有元素都用 cqw（场景宽度的 1%）或百分比来度量。由于高度由宽度推导而来，两个轴会同步缩放。从 320px 到 1920px，画面看起来完全一致，只是大小不同。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
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.
