写点什么

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

作者:Augus
  • 2021 年 12 月 21 日
  • 本文字数:1002 字

    阅读完需:约 3 分钟

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

往期推荐:


CSS之变量

前言

上一章我们说到了 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!!!

用户头像

Augus

关注

爱瞎搞的软件开发工程师 2021.06.10 加入

某摸鱼集团

评论

发布
暂无评论
CSS之变量(二)条形加载条