如何使用SCSS实现星空效果

引言

星空，自古以来就是人类探索和梦想的源泉。在网页设计中，星空效果不仅能够吸引用户的眼球，还能为网站增添一抹神秘和浪漫的氛围。本文将通过SCSS（Sassy CSS）的高级功能，教你如何实现一个动态的星空效果。

准备工作

首先，我们需要准备一个HTML文件和一个SCSS文件。HTML文件负责页面结构，而SCSS文件则负责页面的样式和动画效果。

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星空效果</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="star-container">
        <!-- 这里我们将创建5层星星，每层星星的大小和数量会有所不同 -->
        <div class="layer1"></div>
        <div class="layer2"></div>
        <div class="layer3"></div>
        <div class="layer4"></div>
        <div class="layer5"></div>
    </div>
</body>
</html>

SCSS变量和函数

在SCSS文件中，我们首先定义了一些变量和函数，用于控制星星的颜色、大小、数量以及动画效果。

$star-color: #f60; // 星星的颜色
$star-size: 6px; // 星星的基准大小
$duration: 7000ms; // 星星向上运动的速度
$star-count:100; // 星星的基准数量

// 随机变亮或变暗的函数
@function random-color-variation($color, $range: 10%) {
  $darken-percentage: random(100) * 1%; // 随机生成一个百分比
  $lighten-percentage: 100% - $darken-percentage; // 计算剩余的百分比以变亮

  @if random(2) == 1 {
    // 随机选择变暗或变亮
    @return darken($color, $darken-percentage);
  } @else {
    @return lighten($color, $lighten-percentage);
  }
}

// 创建指定数量星星的box-shadow函数
@function buildStarShadows($n) {
   $shadows: '#{random(100)}vw #{random(100)}vh #fff';
  @for $i from 2 through $n {
    $color: random-color-variation($star-color, 20%);
    $shadows: '#{$shadows},#{random(100)}vw #{random(100)}vh #{$color}';
  }

  @return unquote($shadows);
}

CSS样式和动画

接下来，我们将编写CSS样式和动画，以实现星空效果。

html,
body {
  padding: 0;
  margin: 0;
}

// 动画定义
@keyframes move {
  to {
    transform: translateY(-100vh);
  }
}

.star-container {
  width: 100%;
  height: 100vh;
  background: #000; // 夜空颜色

  @for $i from 1 through 5 {
    // 循环创建5层星星
    .layer#{$i} {
      position: fixed;
      width: $size;
      height: $size;
      border-radius: 50%;
      left: 0;
      top: 0;
      box-shadow: buildStarShadows($count);
      animation: move $delay linear infinite normal;

      &::after {
        content: '';
        position: fixed;
        left: 0;
        top: 100vh;
        border-radius: inherit;
        width: inherit;
        height: inherit;
        box-shadow: inherit;
      }
    }
  }
}

实现效果

通过上述代码，我们将在网页上创建一个动态的星空效果。每层星星都有不同的大小和数量，以及不同的动画延迟，从而营造出一种深邃和动态的星空感。

附加信息

如果你想要更多的星星或者不同的效果，可以通过修改$star-count变量或者增加.layer的数量来实现。
星空效果可能会对性能有一定影响，特别是在移动设备上，因此请适当优化以确保网页的流畅性。

希望这篇博客能够帮助你实现一个令人惊叹的星空效果，为你的网页设计增添一抹亮色。