CSS之变量(三)心形加载条

·  阅读 169
CSS之变量(三)心形加载条

「这是我参与11月更文挑战的第二十六天,活动详情查看:2021最后一次更文挑战」。

往期推荐:

CSS之变量

CSS之变量(二)条形加载条

前言

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

心形加载条

先看效果图:

loveLoading.gif

观察动画我们分析,

  • 对称的两个直线的动画是相同的,区别在于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!!!

分类:
前端
标签: