src/animations/ball-triangle-trace.scss

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

@import '../variables';
@import '../mixins';

$amount: 50px;

@keyframes ball-triangle-path-1 {
  33% {
    transform: translate($amount / 2, -$amount);
  }
  66% {
    transform: translate($amount, 0px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

@keyframes ball-triangle-path-2 {
  33% {
    transform: translate($amount / 2, $amount);
  }
  66% {
    transform: translate(- $amount / 2, $amount);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

@keyframes ball-triangle-path-3 {
  33% {
    transform: translate(-$amount, 0px);
  }
  66% {
    transform: translate(- $amount / 2, -$amount);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

@mixin ball-triangle-path($n:3) {
  $animations: ball-triangle-path-1 ball-triangle-path-2 ball-triangle-path-3;

  @for $i from 1 through $n {
    > div:nth-child(#{$i}) {
      animation-name: nth($animations, $i);
      animation-delay: 0;
      animation-duration: 2s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
    }
  }
}

.ball-triangle-path {
  position: relative;
  @include ball-triangle-path();
  transform: translate(-$amount / 1.667, -$amount / 1.333);