前言
上一章，我们通过应用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！！！
