css3动画loading效果

1.在html中创建div

<div id="loading">

        <div class="jc ant-1"></div>

        <div class="jc ant-2"></div>

        <div class="jc ant-3"></div>

        <div class="jc ant-4"></div>

</div>

2.样式

#loading{
    width: max-content;
    margin: 0 auto;
    height: 40px;
    display: flex;
    align-items: flex-end;
}
.jc{
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    background-color: #0078ff;
    margin-right: 5px;
}

/* 定义动画 */

@keyframes k-loadingA{
        50%{height: 40px;}
        100%{height: 15px;}
 }

/* 设置动画 */
 

.ant-1{
        animation: k-loadingA 3s 0s infinite;
}
.ant-2{
        animation: k-loadingA 3s 0.6s infinite;
}
.ant-3{
        animation: k-loadingA 3s 1.2s infinite;
}
.ant-4{
        animation: k-loadingA 3s 1.8s infinite;
}