一碗豚骨拉面：纯 CSS 还原深夜拉面馆的氛围
来源：dev.to — 2026-08-03
📋 概述
这是 Frontend Challenge 治愈美食主题的 CSS Art 参赛作品。作者想验证“豚骨拉面的感觉——不只是食物的样子，还有深夜拉面馆的氛围”——能否用 CSS 作为主料呈现。他构建了一个自包含的 HTML 场景：木纹桌面、吊灯、竹托盘、筷子、腌姜碟和盖了印章的订单票。拉面汤用多层 radial-gradient、鸣门卷用 conic-gradient 加遮罩切出真正的手风琴横截面，滚动的叉烧用 repeating-radial-gradient 渲染，蒸汽用随机时长的模糊动画制造有机感。
🔑 核心要点
- 鸣门卷遮罩技巧：conic-gradient 配上 radial-gradient mask 切出真正的手风琴横截面，而非扁平圆盘
- 滚汤与叉烧：mix-blend-mode:screen 叠加辣油油滴与芝麻点，repeating-radial-gradient 画叉烧肉卷的同心螺旋
- 有机蒸汽：模糊半透明 puff 用随机时长加三种漂移变体（rise/riseL/riseR），避免节拍器式循环
- 真实 bug 复盘：木纹 mix-blend-mode:multiply 的 ::after 曾盖在碗上，用 z-index + isolation:isolate 收敛层叠上下文修复
- 克制用 JS：JS 只做蒸汽节奏扰动与指针视差，其余全是 CSS
💡 金句
The star of the show is CSS, as the prompt asks.
👍 0
👎 0
← 返回 Dev.to 首页