纯css星空动画

好久没有发css相关的demo了,今天整了个新活,
我们平常开发那种星星效果,如下gif,都是使用js开发,但是今天的文章既然是放在纯css专栏里,那自然是用js写的

原理其实也不复杂,每个元素都有阴影,阴影能设置多个,css能控制这些阴影移动,
那原理有了实践如下

使用的是v3, 和scss

<script setup>
</script>

<template>
  <div class="box">
    <div v-for="i in 5" :key="i" :class="'layer' + i"></div>
  </div>
</template>

<style scoped lang="scss">
@use "sass:math";
$size: 20px;
$duration: 800s;
$count: 1300;
.box {
  height: 100vh;
  width: 100vw;
  background: black;
}

.title {
  background-clip: text;
  color: transparent;
}
@function getShadows($n) {
  $shadows: "#{random(100)}vw #{random(100)}vh #fff";
  @for $i from 2 through $n {
    $shadows: "#{$shadows}, #{random(100)}vw #{random(100)}vh #fff";
  }
  @return unquote($shadows);
}
@for $i from 1 through 5 {
  $duration: math.div($duration, 2);
  $count: floor(math.div($count, 2));
  .layer#{$i} {
    $size: #{$i}px;
    position: fixed;
    width: $size;
    height: $size;
    border-radius: 50%;
    left: 0;
    top: 0;
    box-shadow: getShadows($count);
    animation: moveUp $duration linear infinite;
    &::after {
      content: "";
      position: fixed;
      left: 0;
      top: 100vh;
      border-radius: inherit;
      width: inherit;
      height: inherit;
      box-shadow: inherit;
    }
  }
}
@keyframes moveUp {
  to {
    transform: translateY(-100vh);
  }
}
</style>