用 CSS 做一片会呼吸的雪

这个博客的背景里有雪。不是贴图，是三层用 radial-gradient 画出来的点，配合两条极慢的 transform 动画。这篇文章记一下它的做法，以及我踩过的坑。

第一层：一片雪

.flake {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(190, 235, 255, 0.35) 45%,
    transparent 70%
  );
}

关键是中间那档颜色。如果用纯白 + 透明度，雪会显得像噪点；加一点青，它才会像"在冷空气里"。

第二层：让它们不一样

一片一片写 nth-child 是徒劳。真正省事的做法是让 CSS 自己算：

.snow > i {
  animation-duration: calc(var(--i) * 1.7s + 9s);
  animation-delay: calc(var(--i) * -0.9s);
  transform: translate3d(calc(var(--i) * 3vw), 0, 0);
}

--i 从 1 到 12，用一条内联 style 塞进去。这样十二片雪就有十二种速度、十二个相位，人类的眼睛已经分辨不出规律了。

第三层：只动两个属性

动画只改 transform: translate3d() 和 opacity。

不要动 top。一旦动了布局属性，雪就会在低端机上变成抽搐的雨。

最后一条：把它关掉

@media (prefers-reduced-motion: reduce) {
  .snow { display: none; }
}

雪是装饰。装饰没有资格让任何人头晕。这是我在这个页面上唯一一条不容商量的规则。

收尾

写完这段代码的那个下午，我把窗户打开了一条缝。真正的雪没有落下，只有风。但屏幕上那三层渐变确实在慢慢往下走，像有人在很远的地方筛面粉。

算是成功了吧。