SCSS粒子动画求助：随机位置生成后所有粒子朝同一方向向下移动

核心修改逻辑 #

• 为每个粒子预生成唯一固定的初始水平偏移值、初始缩放比例，避免动画执行过程中属性随机变动
• 垂直位移随动画进度线性递增，保证所有粒子移动方向统一向下
• 保留每个粒子动画时长、启动延迟的随机属性，维持错落自然的视觉效果

修改后核心代码 #

// 可根据需求调整全局粒子数量
$dot-count: 30;

@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;
    }
  }
  // 每个粒子仅生成一次固定初始属性
  $init-x: random(100) - 50vw;
  $init-scale: random(70) / 100 + 0.3;
  $steps: random(15) + 10;
  @keyframes move-path-#{$i} {
    @for $step from 0 through $steps {
      #{$step / $steps * 100%} {
        transform: 
          translateX($init-x)
          translateY($step / $steps * 120vh - 10vh)
          scale($init-scale);
      }
    }
  }
}

效果调整提示 #

如果需要修改移动范围、速度，可调整translateY中的参数：

• 120vh 控制粒子总移动距离，数值越大移动范围越长
• -10vh 控制粒子初始垂直位置，负数值越小起始点越靠视口上方
• 若需要粒子向下移动时伴随轻微水平摆动，可给$init-x增加小幅度的步进随机值，不影响整体移动方向即可

内容的提问来源于stack exchange，提问作者DearBee