（简单）HTML+CSS加载动画

最近写了一个简单的动画加载（主要是最近好久没更新了，有点心虚），如图：


就是这样的一个加载动画，现在把代码放在下面。

body {
    height: 100vh;
    background: #000;
    display: flex;
    justify-content: center;/*依据主轴（横轴）方向居中*/
    align-items: center;/*依据侧轴（纵轴）方向居中*/
}
ul {
    height: 200px;
    display: flex;
    background-color: #181a39;
    padding:50px;
}
li {
    width: 20px;
    height: 100px;
    background-color: #51effd;
    margin: auto 10px;
}
li:nth-child(1) {
    animation: change 2s 0s infinite;/*更改时间 ：前面为动画时长 后面一个为延迟时间*/
}

li:nth-child(2) {
    animation: change 2s 0.2s infinite;
}
li:nth-child(3) {
    animation: change 2s 0.3s infinite;
}
li:nth-child(4) {
    animation: change 2s 0.4s infinite;
}
@keyframes change {/*@keyframes声明动画*/
    30%, 50% {
        height: 180px;
    }
    70%, 100% {
        height: 100px;
    }
}

<div class="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

OK，就是这个样子，比较简单，没什么好讲的，也写在注释里了。
虽然有可能会撞车，如果撞了的话可以私信。

干巴爹，学习中的骚年。