持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第18天，点击查看活动详情

在视频上有看到线条loading的效果，今天我们就来做一个线条呼吸loading，只不过线条拼成了一个心形🧡。

呼吸的心

之前我们有画过❤️，可参考：（八）巧用CSS3之心形，今天我来做一个线性的心。

结构

因为我们需要对称结构，又需要足够多的线条，所以dom元素会比较多，如下：

<div class="loading">
    <span style="--i:0"></span>
    <span style="--i:1"></span>
    <span style="--i:2"></span>
    <span style="--i:3"></span>
    <span style="--i:4"></span>
    <span style="--i:3"></span>
    <span style="--i:2"></span>
    <span style="--i:1"></span>
    <span style="--i:0"></span>
</div>

样式

首先，我们需要准备一个容器，可以存放这些线条，如下：

.loading {
    --h: 10rem;
    width: calc(var(--h) * 1.3);
    height: var(--h);
    position: relative;
    display: flex;
    justify-content: space-around;
}

然后，我们需要给线条一个通用的样式，因为是对称的，所以颜色就根据--i变量进行过滤，如下：

.loading span {
    width: calc(var(--h) * 0.05);
    background: violet;
    filter: hue-rotate(calc(var(--i) * 72deg));
    position: relative;
    height: var(--sh);
    top: var(--top);
    border-radius: calc(var(--h) * 0.05);
}

接下来，我们需要给每个线条添加独有的样式，其实这些样式也可以以变量的形式定义在style中，但是这样会显得dom比较臃肿，所以就单独写出来了，如下：

.loading span:nth-child(1),
.loading span:nth-child(9) {
    --sh: calc(var(--h) * 0.2);
    --top: calc(var(--h) * 0.2);

}

.loading span:nth-child(2),
.loading span:nth-child(8) {
    --sh: calc(var(--h) * 0.4);
    --top: calc(var(--h) * 0.1);

}

.loading span:nth-child(3),
.loading span:nth-child(7) {
    --sh: calc(var(--h) * 0.65);
    --top: calc(var(--h) * 0);

}

.loading span:nth-child(4),
.loading span:nth-child(6) {
    --sh: calc(var(--h) * 0.7);
    --top: calc(var(--h) * 0.1);

}

.loading span:nth-child(5) {
    --sh: calc(var(--h) * 0.8);
    --top: calc(var(--h) * 0.2);
}

最后呢，我们需要给每个线条加上动画，如下：

.loading span {
    animation: _animate 3s linear infinite;
}
@keyframes _animate {
    0% ,100%{
        height: 10%;
        top: 45%;
    }

    50% {
        height: var(--sh);
        top: var(--top);
    }
}

效果

效果及其代码详情，如下：

总结

利用filter可以方便的改变元素的颜色，但是如果是需要特定的颜色，建议还是具体赋值。