WEB加载动画之彩条起伏动画

这是我参与11月更文挑战的第25天，活动详情查看：2021最后一次更文挑战

介绍

本期将带给大家一个简单的创意加载效果——彩条起伏加载。顾名思义，我们会通过scss来完成，将会制作做7个不同颜色的矩形，按不同的延迟不断的递减然后再反弹，循环往复。寓意是希望各位同学像这个加载动画一样，生活过的多姿多彩。

接下来，我们先来一睹为快吧：

感觉如何，其实这个动画的实现方案有很多，今天就用障眼法去实现它，希望给你打开书写css的新思路。

正文

1.彩条绘制

<div id="app">
    <div class="loading">
        <span>l</span>
        <span>o</span>
        <span>a</span>
        <span>d</span>
        <span>i</span>
        <span>n</span>
        <span>g</span>
    </div>
</div>
复制代码

结构非常的简单，我们将会在div#app让div.loading居中显示，然后在loading中平分各个距离，渲染不同的颜色。

@import url("https://fonts.googleapis.com/css?family=Baloo+Bhaijaan&display=swap");

#app{
    width: 100%;
    height: 100vh;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading{
    width: 350px;
    height: 120px;
    display: flex;
    overflow: hidden;
    span{
        flex:1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: cursive;
        font-weight: bold;
        text-transform: uppercase;
        font-family: "Baloo Bhaijaan", cursive;
        color: white;
        font-size: 48px;
        position: relative;
        box-sizing: border-box;
        padding-top: 50px;
        @for $i from 1 through 7 {
            &:nth-child(#{$i}) {
                background: linear-gradient(180deg, hsl($i * 20 , 60%, 50%) 0, hsl($i * 20 , 60%, 90%) 100%);
                box-shadow: inset 0 15px 30px hsl($i * 20 , 60%, 50%);
                text-shadow: 12px 12px 12px hsl($i * 20 , 60%, 30%);
                border-left: 1px solid hsl($i * 20 , 60%, 80%);;
                border-right: 1px solid hsl($i * 20 , 60%, 60%);;
            }
        }
    }
}
复制代码

为了，美观我们还引入了谷歌的一个字体，居中显示是在div#app用了弹性布局。

#app{
	display: flex;
    justify-content: center;
    align-items: center;
}
复制代码

这三句话目的就是完成元素在上下左右居中。

另外，我们用scss的一大好处就是体现了出来，遍历十分的方便，即**@for $i from 1 through 7** 这一句就是遍历了七遍，通过$ i就可以拿到下标，还可以参与运算，我们的颜色值就是通过他配合hsl色盘（HSL即色相、饱和度、亮度）去完成的。当然，色盘有360度，我们只取一部分形成清新的渐变，如果整个色盘都平分的话这几个色值出入还是太大会感觉很脏。

微信截图_20211124221851.png

我们发现文字被设置了padding-top: 50px，原因就是一会要完成起伏的动画，上面的部分最先消失，我们为了保证这些字母能显示时间更长一些，就往下移了一些距离。

2.起伏动画

一开始我们说过这个要用障眼法去实现，所以我们这里不改变span的高度或者裁切他。

.loading{
    span{
       	//...
        &::after{
            content: "";
            display: block;
            box-sizing: border-box;
            position: absolute;
            height: 100%;
            top: 0;
            left: -1px;
            right: -1px;
            background: linear-gradient(180deg, white 0, rgb(249, 249, 249) 100%);
            animation: shorten 2.1s infinite ease-out;
        }
        @for $i from 1 through 7 {
                // ...
                &::after{
                    animation-delay: #{ $i * 0.08s};
                }    
            }
        }
    }
}
@keyframes shorten {
    12%  { height: 10px; }
}
复制代码

微信截图_20211124222854.png

看了刚才的scss代码可以发现，我们其实是通过一个绝对定位的伪类去遮挡了他，做了一个障眼法让人感觉他高度改变了，其实不然。

至于动画，就更容易了就只有一句，就是在初期某个阶段让他变化高度到10px，也就是遮挡块变小了，显示的高度就就多了，然后缓缓增大至整块，来完成起伏效果。另外，我依然通过遍历在其伪类中，给他们不同的延迟显得更有层次感。

讲到这里，我们的这个案例就书写完成了，在线演示。

结语

本次通过一个做加载创意动画的案例，向各位同学讲到了css如何弹性居中，scss的遍历，hsl色盘改变色值的方便之处以及障眼法的一种方式，希望大家会喜欢，多多支持哦~