Claper/assets/css/custom.scss

@use "sass:math";

@import "../node_modules/tiny-slider/src/tiny-slider.scss";

@import "../node_modules/@sjmc11/tourguidejs/src/scss/tour.scss";

$particleSize: 20vmin;
$animationDuration: 6s;
$amount: 20;
.background span {
  width: $particleSize;
  height: $particleSize;
  border-radius: $particleSize;
  backface-visibility: hidden;
  opacity: 0.5;
  position: absolute;
  animation-name: move;
  animation-duration: $animationDuration;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  $colors: (
    #14bfdb,
    #8611ed,
    #b80fef
  );
  @for $i from 1 through $amount {
    &:nth-child(#{$i}) {
      color: nth($colors, random(length($colors)));
      top: random(100) * 1%;
      left: random(100) * 1%;
      animation-duration: math.div(random($animationDuration * 10), 10) * 1s + 10s;
      animation-delay: math.div(random($animationDuration + 10s) * 10, 10) * -1s;
      transform-origin: (random(50) ) * 1vw (random(50)) * 1vh;
      $blurRadius: (random() + 0.9) * $particleSize * 0.9;
      $x: if(random() > 0.5, -1, 1);
      box-shadow: ($particleSize * 2 * $x) 0 $blurRadius currentColor;
    }
  }
}

@keyframes move {
  100% {
    transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}