SCSS粒子影片-在隨機位置創建，但在同一方向移動所有粒子-有解無憂

我對 SCSS 還很陌生，所以希望有人可以幫助我。我試圖沿相同方向（向下）移動粒子，但是因為所有粒子都是隨機放置的，所以它們的目的地也以隨機結束。

我想保持隨機放置，但是一旦放置它們，我希望它們都朝著同一個方向（向下）而不是隨機方向移動。我不知道如何在不丟失步驟生成的隨機定位的情況下做到這一點。

我知道如何在 CSS 中做到這一點，但這需要手動指定每條路徑，如果我可以讓它與 SCSS 一起作業，這將是我的最終解決方案，除非有人可以幫助我？

這是JSFiddle來展示它的行為方式，但這是創建隨機步驟的部分：

社會保障局

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

uj5u.com熱心網友回復：

您可以定義所有粒子共有的隨機變數，使用它來定位粒子，然后根據它們的步數而不是隨機移動它們。

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/338631.html

標籤：css 动画片蠢货粒子

上一篇：SVG路徑繪制影片-使用anime.js繪制線條，如何阻止線條重疊

下一篇：linux中的簡單排序