:doodle{
@grid: 8x8 / 100vw 100vh; /* 30×30 的网格 */
overflow: hidden;
background: transparent;
}
@shape: bud 5;
/* 每个格子先做成一个「气球」：椭圆 + 小尾巴 */
@place-cell: @r(0%,100%) @r(110%,130%); /* 初始位置：水平完全随机，垂直在视口下方 */
@size: @r(15px, 70px); /* 随机大小（宽、高） */
background: @p(#f44336, #e91e63, #9c27b0, #673ab7, #3f51b5, #60569e, #e6437d, #ebbf4d, #00bcd4,
#03a9f4,#2196f3, #009688, #5ee463, #f8e645, #ffc107, #ff5722, #43f8bf); /* 随机挑颜色 */
filter: blur(@r(40px, 60px));
transform: rotate(@r(0, 360deg));
/* 随机动画：上升 + 左右摆动 */
animation:
float @r(10s,15s) @r(-10s,0s) infinite cubic-bezier(.05,.68,.67,.45),
sway @r(10s,15s) @r(-10s,0s) infinite ease-in-out,
twinkle @r(2s,4s) @r(-4s,0s) infinite ease-in-out;
/* 关键帧：垂直上升 */
@keyframes float{
100%{ transform: translateY(-120vh); } /* 一直飘到屏幕外上方 */
}
/* 关键帧：水平摆动 */
@keyframes sway{
0%,100%{ transform: translateX(@r(-30px,30px)); }
50%{ transform: translateX(@r(-30px,30px)); }
}
@keyframes twinkle{
0%, 100%{ opacity: .4; filter: blur(@r(40px, 60px)) brightness(.8); }
50%{ opacity: 1; filter: blur(0) brightness(1.4); }
}
css-doodle 气球背景示例