scss星空

<template>
  <div class="starry-sky__box">
    <div class="layer1"/>
    <div class="layer2"/>
    <div class="layer3"/>
    <div class="layer4"/>
    <div class="layer5"/>
    <div class="title-text">I LOVE YOU !</div>
  </div>
</template>
<script lang="ts" setup>

    useHead({
        title: '徐徐爱coding-欢迎你 scss星空',
        meta: [
            { name: 'description', content: '利用scss实现一个星空效果' },
            { name: 'keywords', content: 'scss,css,前端,星空' },
        ],
    });
</script>
<style lang="scss" scoped>
.starry-sky__box{
    width: 100%;
    height: calc(100vh - var(--xu-header-height));
    background-color: black;
    overflow: hidden;
}
.title-text {
  font-size: 50px;
  color: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  letter-spacing: 0.1em;
  font-weight: bold;
  filter: drop-shadow(4px 4px 4px #fff);
  white-space: nowrap;
}
@function getShadow($n) {
  $shadow: "";
  @for $i from 2 through $n {
    $shadow:
      #{$shadow},
      #{random(2000)}px #{random(2000)}px #fff;
  }
  @return $shadow;
}

$count: 700;
@for $i from 1 through 4 {
  $count: floor(calc($count / $i));
  .layer#{$i} {
    $width: #{$i}px;
    width: $width;
    height: $width;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: getShadow($count);
    animation: moveup 12s linear infinite;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      top: 100%;
      left: 0;
      width: $width;
      height: $width;
      border-radius: 50%;
      background-color: #fff;
      box-shadow: getShadow($count);
      position: absolute;
      top: 2000px;
    }
  }
}
@keyframes moveup {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-2000px);
  }
}
</style>