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