用 Sass 函数点亮冬日：动态落雪背景

2024-01-06 19:18:38

使用 Sass 函数打造迷人的落雪背景

在数字世界中追寻大自然的奇观

数字世界为我们提供了无限的可能性，让我们能够将大自然的奇观融入我们的创作中。从物理效果到视觉重现，技术帮助我们打破界限，创造出令人惊叹的体验。今天，我们将踏上一个迷人的旅程，使用 Sass 函数打造一个落雪背景，为你的网站或应用程序增添一抹冬日魔法。

Sass 函数的奇妙之旅

认识 random() 函数

Sass，一种强大的 CSS 预处理器，提供了丰富的函数库，让我们可以将复杂的操作简化为简洁的代码。在此项目中，我们将利用 random() 函数来模拟雪花随机落下的轨迹。该函数可以生成一个介于最小值和最大值之间的随机数。

@function random($min, $max) {
  $range: $max - $min;
  $random: random-($range);
  @return $min + $random;
}

随机雪花轨迹

通过将 random() 函数应用于 transform 属性，我们可以让雪花以不同的速度和角度下落，模拟出逼真的随机轨迹。

animation: fall infinite 2s linear;
animation-delay: random(0, 5)s;

打造落雪背景

创建基底样式

让我们从创建一个基底样式开始，定义 snow 类，并设置其位置为绝对，并覆盖整个屏幕。然后，应用背景色和透明度，为雪花营造一个舞台。

.snow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  opacity: 0.5;
}

添加雪花

接下来，我们创建 flake 类，代表每个雪花。使用 @keyframes 规则定义雪花的动画，包括旋转和下落运动。

.flake {
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;

  @keyframes fall {
    0% {
      transform: translate(0, 0) rotate(0deg);
    }
    100% {
      transform: translate(0, 100%) rotate(360deg);
    }
  }
}