SCSS 粒子动画 - 在随机位置创建，但沿同一方向移动所有粒子

Question

我对 SCSS 还很陌生，所以希望有人可以帮助我。 我正在尝试将粒子朝同一个方向（向下）移动，但是因为所有粒子都是随机放置的，所以它们的目的地也是随机的。

我想保持随机放置，但是一旦放置它们，我希望它们都朝着相同的方向（向下）而不是随机方向。我不知道如何在不丢失步骤生成的随机定位的情况下做到这一点。

我知道如何在 CSS 中执行此操作，但这需要手动指定每个路径，如果我可以让它与 SCSS 一起使用，这将是我的最终解决方案，除非有人可以帮助我？

这里是 JSFiddle 来展示它的行为方式，但这是创建随机步骤的部分：

SCSS

@for $i from 1 through $dot-count {
  &:nth-of-type(#{$i}) {
    animation-name: move-path-#{$i};
    &:before {
      animation-duration: random(5000) + 5000ms, random(1000) + 7000ms;
      animation-delay: random(6000) + 500ms, 0s;
    }
  }
  $steps: random(15) + 10;
  @keyframes move-path-#{$i} {
    @for $step from 0 through $steps {
      #{$step / $steps * 100%} {
        transform: translateX(random(100) - 50vw)
          translateY(random(100) - 50vh)
          scale(random(70) / 100 + 0.3);
      }
    }
  }
}

Answer 1

您可以定义一个所有粒子共有的随机变量，使用它来定位您的粒子，然后根据它们的步数而不是随机移动它们。

html {
  font-size: 30vmax / 1920 * 100;
  font-family: "Quicksand", sans-serif;
  background-color: #000;
  margin: 0;
  padding: 0;
  @media (max-width: 768px) {
    font-size: 50px;
  }
}

// Stars
$dot-color: #fff;
$dot-count: 35;

#milky-way {
  width: 100%;
}

.sky {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}
.dot {
  position: absolute;
  width: 0.08rem;
  height: 0.08rem;
  top: 50%;
  left: 50%;
  animation: 160s ease both infinite alternate;
  &:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: $dot-color;
    transform-origin: -1rem;
    animation: lighting ease both infinite, auto-rotating ease both infinite;
  }
  @for $i from 1 through $dot-count {
    // Random variable common to all particles
    $random: random(100);
    &:nth-of-type(#{$i}) {
      animation-name: move-path-#{$i};
      &:before {
        animation-duration: random(5000) + 5000ms, random(1000) + 7000ms;
        animation-delay: random(6000) + 500ms, 0s; // less than max duration
      }
    }
    $steps: random(15) + 10;
    @keyframes move-path-#{$i} {
      
      @for $step from 0 through $steps {
        
        #{$step / $steps * 100%} {
          // first translation is depending on a common random, second is depending on the step number
          transform: translateX($random - 50vw) translateX($step * $step * 150px)
            translateY($random - 50vh) translateY($step * $step * 150px)
            scale(random(70) / 100 + 0.3);
        }
      }
    }
  }
}

@keyframes lighting {
  0%,
  30%,
  100% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    box-shadow: 0 0 0.3rem 0.05rem $dot-color;
  }
}
@keyframes auto-rotating {
  to {
    transform: rotate(0deg);
  }
}