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);
}
}