前言

上一章，我们通过应用css变量而更好了完成了一个条形加载条的效果，更加简化了代码量，并使它变得更好维护了。今天呢，我们在通过css变量实现另一个有意思的东西 -- 心形加载条。

心形加载条

先看效果图：

观察动画我们分析，

对称的两个直线的动画是相同的，区别在于animation-delay，所以通过变量来动态传入即可。通过两根对角线相加等于10的规律我们可以得出，对角线公式：对角线 = 10 - index
直线颜色的渐变，可以通过filter的 hue-rotate的实现。

代码实现

<div class="heart-loading">
  <ul style="--line-count: 9">
    <li v-for="v in 9" :key="v" :class="`line-${v}`" :style="`--line-index: ${v}`"></li>
  </ul>
</div>

.heart-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  ul {
    display: flex;
    justify-content: space-between;
    width: 150px;
    height: 10px;
  }
  li {
    $turn: calc(var(--line-index) / var(--line-count) * .5turn);
    $time: calc(var(--line-index) * 40ms);
    border-radius: 5px;
    width: 10px;
    height: 10px;
    background-color: pink;
    filter: hue-rotate($turn);
    animation: 1s $time infinite;
    &.line-1,
    &.line-9 {
      animation-name: beat-1;
    }
    &.line-2,
    &.line-8 {
      animation-name: beat-2;
    }
    &.line-3,
    &.line-7 {
      animation-name: beat-3;
    }
    &.line-4,
    &.line-6 {
      animation-name: beat-4;
    }
    &.line-5 {
      animation-name: beat-5;
    }
  }
}
@keyframes beat-1 {
  0%,
  10%,
  90%,
  100% {
    height: 10px;
  }
  45%,
  55% {
    height: 30px;
    transform: translate3d(0, -15px, 0);
  }
}
@keyframes beat-2 {
  0%,
  10%,
  90%,
  100% {
    height: 10px;
  }
  45%,
  55% {
    height: 60px;
    transform: translate3d(0, -30px, 0);
  }
}
@keyframes beat-3 {
  0%,
  10%,
  90%,
  100% {
    height: 10px;
  }
  45%,
  55% {
    height: 80px;
    transform: translate3d(0, -40px, 0);
  }
}
@keyframes beat-4 {
  0%,
  10%,
  90%,
  100% {
    height: 10px;
  }
  45%,
  55% {
    height: 90px;
    transform: translate3d(0, -30px, 0);
  }
}
@keyframes beat-5 {
  0%,
  10%,
  90%,
  100% {
    height: 10px;
  }
  45%,
  55% {
    height: 90px;
    transform: translate3d(0, -20px, 0);
  }
}

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

CSS之变量（三）心形加载条

前言

心形加载条

代码实现