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

介绍

本期将带给大家一个简单的创意加载效果——彩条起伏加载。顾名思义，我们会通过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 ifrom1through7∗∗这一句就是遍历了七遍，通过i from 1 through 7** 这一句就是遍历了七遍，通过ifrom1through7∗∗这一句就是遍历了七遍，通过i就可以拿到下标，还可以参与运算，我们的颜色值就是通过他配合hsl色盘（HSL即色相、饱和度、亮度）去完成的。当然，色盘有360度，我们只取一部分形成清新的渐变，如果整个色盘都平分的话这几个色值出入还是太大会感觉很脏。

我们发现文字被设置了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; }

}

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

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

讲到这里，我们的这个案例就书写完成了

结语

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