scss

呼吸态动画

@mixin animation-breathe($start: 1, $end: 0.8, $time: 2s) {
  transform-origin: center center;
  animation: ani-breathe $time linear infinite;
  @keyframes ani-breathe {
    0%, 100% {
      transform: scale($start);
    }
    50% {
      transform: scale($end);
    }
  }
}

设置背景图

@mixin bgImg($w, $h, $url) {
  width: $w;
  height: $h;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url($url);
  background-size: $w $h;
}

水平垂直居中

@mixin positionCenter($l: null, $r: null, $t: null, $b: null) {
  position: absolute;
  margin: auto;
  @if ($l != 'null') {
    left: $l;
  }
  @if ($r != 'null') {
    right: $r;
  }
  @if ($t != 'null') {
    top: $t;
  }
  @if ($b != 'null') {
    bottom: $b;
  }
}

渲染多张图片

.more-image {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 3rem 1rem;

  @for $i from 1 through 6 {
    &.lock-#{$i} {
      background-image: url("lock-#{$i}.png");
    }
  }
}

渲染精灵图多个位置

.more-position {
  background-image: url("list.png");
  background-repeat: no-repeat;
  background-size: 3rem 1rem;

  $leftDiff: 0;
  $topDiff: -0.1;
  @for $i from 1 through 10 {
    &.lock-#{$i} {
      background-position: ($leftDiff)rem  ($topDiff * ($i - 1))rem;
    }
  }
}

横向序列帧模板

@mixin animationTemplate($aniName, $w: 0, $h: 0, $imgWidth: 0, $count: 0) {
  width: $w;
  height: $h;
  background-repeat: no-repeat;
  background-size: $imgWidth $h;
  animation: $aniName 2s steps($count) 1 forwards;
  @keyframes #{$aniName} {
    from {
      background-position: 0px 0px;
    }
    to {
      background-position: -$imgWidth 0px;
    }
  }
}

// 使用示例
.ani-1-1 {
  background-image: url("xxx.png");
  @include animationTemplate(ani-1-1, 100px, 100px, 500px, 5);
}