想要个可爱天气面板：写了个云朵飘动的静态挂件，纯 CSS 动起来

给个人页加个天气小挂件，接真实接口要 key、要联网，太重。我想要个纯装饰的：几朵云慢慢飘、背景暖暖的，挂那就是个氛围，不依赖任何数据。纯 CSS 就能做，云用圆角矩形拼，飘动用 keyframes，零 JS 也行。

一、云怎么画：圆角矩形拼

一朵云不用图片，三四个圆角块叠出轮廓：

.cloud { position: relative; width: 120px; height: 40px;
  background: #fff; border-radius: 20px; }
.cloud::before, .cloud::after {
  content: ''; position: absolute; background: #fff; border-radius: 50%;
}
.cloud::before { width: 50px; height: 50px; top: -22px; left: 18px; }
.cloud::after  { width: 36px; height: 36px; top: -14px; left: 64px; }

主体是个扁圆角条，两个伪元素是大圆当"云包"，叠出蓬松感。颜色全白，靠阴影或背景衬托。要不同大小的云，复制几份改宽高即可。

二、飘动：不同层不同速度

云的"活"靠横向平移，每层速度错开才有远近：

@keyframes drift { from { transform: translateX(-140px); }
  to { transform: translateX(680px); } }
.c1 { animation: drift 22s linear infinite; }
.c2 { animation: drift 34s linear infinite; opacity: .8; }
.c3 { animation: drift 48s linear infinite; opacity: .6; transform: scale(.7); }

drift 从左边移出到右边，linear 匀速像被风吹；三朵云周期 22/34/48 秒不同，慢的更小更透，像远处的云。无限循环，挂件一直有动静。

三、加个太阳和暖背景

光有云偏冷，叠个太阳和渐变天空更治愈：

.sky { background: linear-gradient(180deg,#ffe9c7,#ffd1e0); }
.sun { width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle,#fff3b0,#ffd166);
  animation: glow 6s ease-in-out infinite alternate; }
@keyframes glow { to { transform: scale(1.08); } }

天空用暖色渐变，太阳 radial-gradient 做出光晕，glow 轻微缩放像呼吸。整体不放真实温度数字，纯粹氛围件，适合做页脚或桌面角落。

四、几种天气挂件路线

小结

云朵挂件用圆角矩形加两个伪元素圆拼出云形，不引任何图片；飘动靠 @keyframes drift 横向平移，三层周期 22/34/48 秒错开、慢者更小更透，做出远近层次。暖色渐变天空叠 radial-gradient 太阳，轻微缩放像呼吸。纯 CSS 零 JS，不联网不依赖数据，适合当个人页或桌面的治愈一角。