src/animations/pacman.scss

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

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

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

$size: 25px;

@keyframes rotate_pacman_half_up  {
    0% {
         transform:rotate(270deg);
    }
    50% {
         transform:rotate(360deg);
    }
    100% {
         transform:rotate(270deg);
    }
}

@keyframes rotate_pacman_half_down  {
    0% {
         transform:rotate(90deg);
    }
    50% {
         transform:rotate(0deg);
    }
    100% {
         transform:rotate(90deg);
    }
}

@mixin pacman_design(){
    width: 0px;
    height: 0px;
    border-right: $size solid transparent;
    border-top: $size solid $primary-color;
    border-left: $size solid $primary-color;
    border-bottom: $size solid $primary-color;
    border-radius: $size;
}

@keyframes pacman-balls {
  75% {
    opacity: 0.7;
  }
  100% {
    transform: translate(-4 * $size, -$size / 4);
  }
}

@mixin ball-placement($n:3, $start:0) {
  @for $i from $start through $n {
    > div:nth-child(#{$i + 2}) {
      animation: pacman-balls 1s delay(.33s, $n, $i) infinite linear;
    }
  }
}

.pacman {
  @include ball-placement();