<div class="list grow-melt middle-stagger">
  <div class="list-item"></div>
  <div class="list-item"></div>
  <div class="list-item"></div>
  <div class="list-item"></div>
  <div class="list-item"></div>
  <div class="list-item"></div>
  <div class="list-item"></div>
  <div class="list-item"></div>
  <div class="list-item"></div>
  <div class="list-item"></div>
  <div class="list-item"></div>
  <div class="list-item"></div>
  <div class="list-item"></div>
  <div class="list-item"></div>
  <div class="list-item"></div>
  <div class="list-item"></div>
</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background: #222;
}

:root {
  --blue-color-1: #6ee1f5;
}

// 绝对值
@function abs($v) {
  @return max(#{$v}, calc(-1 * #{$v}));
}

// 中位数
@function middle($v) {
  @return calc(0.5 * (#{$v} - 1));
}

// 数轴上两点距离
@function dist-1d($v1, $v2) {
  $v-delta: calc(#{$v1} - #{$v2});
  @return #{abs($v-delta)};
}

.list {
  &.grow-melt {
    .list-item {
      --t: 2s;

      animation-name: grow, melt;
      animation-duration: var(--t);
      animation-iteration-count: infinite;
    }
  }
}

@keyframes grow {
  0% {
    transform: scale(0);
  }

  50%,
  100% {
    transform: scale(1);
  }
}

@keyframes melt {
  0%,
  50% {
    box-shadow: inset 0 0 0 var(--p) var(--bg);
  }

  100% {
    box-shadow: inset 0 0 0 0 var(--bg);
  }
}