使用css阴影实现星空背景效果

css 越来越强大了，现在即使不使用 javascript 也能各种各样炫酷的动画效果

比如使用 css 阴影来实现一个星空背景的效果

思路

我们知道，星星看起来就是一个个的小点或者说一个个很小的粒子，在前端要表示一个很小的粒子，只需要一个大小为 1px 左右的 div 标签并带上一个颜色就可以实现了

但是要实现一个星空的话是需要很多粒子的，如果全部使用 1px 的元素，那么页面就会因为这个背景效果从而向 dom 插入过多元素

这时候就可以使用到 box-shadow 这个属性了

box-shadow 是一个 CSS 属性，它可以向一个元素添加一个或多个阴影，如果给一个很小的元素添加阴影，那么阴影看起来就就会是一个小点，如果给元素添加多个阴影是不是就可以实现多个小点

至于要实现星空粒子大小参差不齐的话，是不是可以改变元素的大小，比如 2px，那么生成的粒子效果就会稍微大一些

要让星空背景滚动起来的话，可以使用 css 动画，让元素沿着 Y 轴进行移动，阴影也会随着移动，这样就实现了滚动效果

代码

界面结构

首先我们准备好一个基本的 html 界面

页面中有三个 div，分别代表三个不同的大小的星星

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div class="star"></div>
    <div class="medium-star"></div>
    <div class="big-star"></div>
  </body>
</html>

接着我们准备好样式

样式

往 head 标签中添加一个 style 标签并编写以下内容

<style>
  /* 去除默认边距 */
  * {
    margin: 0;
    padding: 0;
  }

  /* 设置body撑满整个页面，并定义一个背景的生成大小 */
  html,
  body {
    height: 100%;
    --starSize: -2000px;
  }

  /* body的背景颜色 */
  body {
    background: radial-gradient(ellipse at bottom, #182735 0%, #090a0f 100%);
  }

  /* 小星星，大小为1px */
  .star {
    height: 1px;
    width: 1px;
    background: transparent;
    animation: star infinite 80s linear;
  }

  /* 中星星，大小为2px */
  .medium-star {
    height: 2px;
    width: 2px;
    background: transparent;
    animation: star infinite 120s linear;
  }

  /* 大星星，大小为3px */
  .big-star {
    height: 3px;
    width: 3px;
    background: transparent;
    animation: star infinite 150s linear;
  }

  /* 定义滚动动画，从opx移动到-2000px，就是向上移动2000px */
  @keyframes star {
    0% {
      transform: translateY(0);
    }

    100% {
      transform: translateY(var(--starSize));
    }
  }
</style>

脚本

然后我们在 body 插入一个 script 标签，并编写以下内容

<script>
  // 获取三个星星元素
  const star = document.querySelector(".star");
  const mediumStar = document.querySelector(".medium-star");
  const bigStar = document.querySelector(".big-star");
  // 定义星星位置的最大偏移量
  const starSize = 2000;
  // 阴影生成函数
  const shadowStr = (count) => {
    // 定义阴影背景字符串
    let str = `${Math.random() * starSize}px ${
      Math.random() * starSize
    }px #fff`;
    for (let i = 0; i < count; i++) {
      // 每次循环生成一个阴影，并拼接到字符串中
      str += `,${Math.random() * starSize}px ${
        Math.random() * starSize
      }px #fff`;
    }
    return str;
  };
  // 调用阴影生成函数生成阴影，并将元素的阴影设置为生成的阴影
  star.style.boxShadow = shadowStr(700);
  mediumStar.style.boxShadow = shadowStr(400);
  bigStar.style.boxShadow = shadowStr(100);
</script>

效果预览

总代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      html,
      body {
        height: 100%;
        --starSize: -2000px;
      }

      body {
        background: radial-gradient(
          ellipse at bottom,
          #182735 0%,
          #090a0f 100%
        );
      }

      .star {
        height: 1px;
        width: 1px;
        background: transparent;
        animation: star infinite 80s linear;
      }

      .medium-star {
        height: 2px;
        width: 2px;
        background: transparent;
        animation: star infinite 120s linear;
      }

      .big-star {
        height: 3px;
        width: 3px;
        background: transparent;
        animation: star infinite 150s linear;
      }

      @keyframes star {
        0% {
          transform: translateY(0);
        }

        100% {
          transform: translateY(var(--starSize));
        }
      }
    </style>
  </head>

  <body>
    <div class="star"></div>
    <div class="medium-star"></div>
    <div class="big-star"></div>
    <script>
      const star = document.querySelector(".star");
      const mediumStar = document.querySelector(".medium-star");
      const bigStar = document.querySelector(".big-star");
      const starSize = 2000;
      const shadowStr = (count) => {
        let str = `${Math.random() * starSize}px ${
          Math.random() * starSize
        }px #fff`;
        for (let i = 0; i < count; i++) {
          str += `,${Math.random() * starSize}px ${
            Math.random() * starSize
          }px #fff`;
        }
        return str;
      };
      star.style.boxShadow = shadowStr(700);
      mediumStar.style.boxShadow = shadowStr(400);
      bigStar.style.boxShadow = shadowStr(100);
    </script>
  </body>
</html>