BACKGROUND & DECOR
有机气泡形状Blob Shapes
不规则圆角（border-radius 八值语法）的色块，像液体一样缓慢变形。
效果预览
缓慢变形的液态气泡
适合用在哪
插画风落地页、教育/亲子/健康类产品、插画替代方案。
容易踩的坑
- 八值 border-radius 动画在大尺寸元素上每帧触发重绘，移动端易掉帧。
- 高饱和气泡面积超过屏幕 30%，会喧宾夺主、压过叠在上面的插画。
- 气泡溢出视口却没设 overflow:hidden，移动端出现横向滚动条。
设计提示词 · Prompt
有机气泡（Blob Shapes）：border-radius 八值语法画不规则形——border-radius:62% 38% 55% 45% / 48% 60% 40% 52%（水平四值 + 斜杠 + 垂直四值），填充双色渐变。动画用 @keyframes 在两组八值之间过渡（10-14s alternate）+ 轻微 rotate，气泡就像在呼吸。2-3 颗放页面对角，作为插画容器的"底座"（插画或截图叠在上面）。低饱和暖色调（奶油、蜜桃、鼠尾草绿）配插画风；饱和色只留给面积小的点缀。
Blob Shapes: Draw irregular shapes with the eight-value border-radius syntax — border-radius: 62% 38% 55% 45% / 48% 60% 40% 52% (four horizontal values + slash + four vertical values), filled with a two-color gradient. Animate with @keyframes transitioning between two sets of eight values (10-14s alternate) plus a slight rotate, so the blob seems to breathe. Place 2-3 blobs at opposite corners of the page as a "base" for illustration containers (illustrations or screenshots layered on top). Low-saturation warm tones (cream, peach, sage green) pair with illustration styles; reserve saturated colors for small accents.
常见搭配
同一页面里经常和「有机气泡形状」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s s--abs d-blobbg"> <div class="d-blobbg__b d-blobbg__b--1"></div> <div class="d-blobbg__b d-blobbg__b--2"></div> <b>缓慢变形的液态气泡</b> </div>