前言

上一章我们说到了CSS变量，如果还没看的话，请看往期推荐的CSS之变量。接下来，我们就看一下，对于CSS变量来说的神奇操作。

条形加载条

先看实现后的效果：

我们先来想想条形加载条的实现逻辑，它是由若干条直线组成，每条直线通过控制时间差，在不同时间段运行相同的动画，然后形成一个动态的加载效果。这样我们就能想到大概的实现代码。

代码实现


  <ul class="strip-loading">
    <li v-for="v in 6" :key="v"></li>
  </ul>

.strip-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  li {
    border-radius: 8px;
    width: 16px;
    height: 70px;
    background-color: white;
    animation: beat 1s ease-in-out infinite;
    & + li {
      margin-left: 20px;
    }
    &:nth-child(2) {
      animation-delay: 200ms;
    }
    &:nth-child(3) {
      animation-delay: 400ms;
    }
    &:nth-child(4) {
      animation-delay: 600ms;
    }
    &:nth-child(5) {
      animation-delay: 800ms;
    }
    &:nth-child(6) {
      animation-delay: 1s;
    }
  }
}
@keyframes beat {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(.5);
  }
}

观看上面代码，你会发现只有每个 li 的的 animation-delay 不同，其余都是相同的，如果有一个加载条有很多条直线的话，可想而知代码是很难维护的。这个时候我们就可以通过在不同 li 的作用域下声明不同的CSS变量，引入到 animation-delay 中，就可以完美的解决这个问题。

优化后的代码

<ul class="strip-loading">
  <li v-for="v in 6" :key="v" :style="`--line-index: ${v}`"></li>
</ul>

.strip-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  li {
    $time: calc((var(--line-index) - 1) * 200ms);
    border-radius: 8px;
    width: 16px;
    height: 70px;
    background-color: white;
    animation: beat 1s ease-in-out $time infinite;
    & + li {
      margin-left: 20px;
    }
  }
}
@keyframes beat {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(.5);
  }
}

好，今天就到这里了，今天努力的你依然是最棒的，Bye Bye！！！

CSS之变量（二）条形加载条

前言

条形加载条

代码实现

优化后的代码