src/animations/ball-zig-zag-deflect.scss

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

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

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

$amount: 30px;

@keyframes ball-zig-deflect {
  17% {
    transform: translate(-$amount/2, -$amount);
  }
  34% {
    transform: translate($amount/2, -$amount);
  }
  50% {
    transform: translate(0, 0);
  }
  67% {
    transform: translate($amount/2, -$amount);
  }
  84% {
    transform: translate(-$amount/2, -$amount);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes ball-zag-deflect {
  17% {
    transform: translate($amount/2, $amount);
  }
  34% {
    transform: translate(-$amount/2, $amount);
  }
  50% {
    transform: translate(0, 0);
  }
  67% {
    transform: translate(-$amount/2, $amount);
  }
  84% {
    transform: translate($amount/2, $amount);
  }
  100% {
    transform: translate(0, 0);
  }
}

.ball-zig-zag-deflect {
  position: relative;
  transform: translate(-$amount / 2, -$amount / 2);

  > div {
    @include balls();
    @include global-animation();

    position: absolute;
    margin-left: $amount / 2;
    top: 4px;
    left: -7px;