CSS小技巧

1. 文字加载

<div class="loaderBox">
    <span>正在加载中</span>
    <span class="loader"></span>
</div>

.loader-wrap {
    display: flex;
    align-items: baseline;
}
.loader {
    height: 50px;
    line-height: 1;
    overflow: hidden;
}
.loader::after {
    content: "...\A..\A.";
    display: block;
    white-space: pre-wrap;
    animation: loading 2s infinite step-start both;
}
@keyframes loading {
    33% {transform: translateY(-2em);}
    66% {transform: translateY(-1em);}
}