scss/ css 实现呼吸灯的效果

之前在项目中有一个大屏的需求，要求页面的地图上展示 一些呼吸灯，以一个实心圆为中心，动态波纹往周围扩展。

效果图如下：

用 css 实现的思路如下，

用 @mixin 声明一个可复用的 css 变量，传入 颜色，宽高，呼吸灯呼吸的时间

@mixin breathe-circle($color, $area, $seacond ) {
  width: $area;
  height: $area;
  background-color: $color;
  border-radius: 50%;
  &::before {
    content: '';
    display: block;
    width: $area;
    height: $area;
    border-radius: 50%;
    opacity: .7;
    background-color: $color;
    animation: breathe $seacond infinite cubic-bezier(0, 0, .49, 1.02);
  }
}

@keyframes breathe {
  0% {
      transform: scale(1)
  }

  50%,
  75% {
      transform: scale(3)
  }

  78%,
  100% {
      opacity: 0
  }
}

传入参数，变化呼吸灯，这里如果不处理时间和颜色，在页面会出现，呼吸灯的呼吸频率一样，导致不协调

.box-crcile {
  @include breathe-circle(#ffa853, 14px, 3.5s);
}
.box-yellow {
  @include breathe-circle(#ffa853, 7px, 2.5s);
}
.box-pink {
  @include breathe-circle(#eb7271, 1vw, 3s);
}
.box-blue {
  @include breathe-circle(#00b2ff, 8px, 2.5s);
}

.box-blue-2 {
  @include breathe-circle(#00b2ff, 8px, 3s);
}

.box-blue-3 {
  @include breathe-circle(#00b2ff, 8px, 3s);
}

这里用到了 css 3 的属性：animation

下面是 animation 的属性：

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。