5.偶然看到的一个css加载动画

Posted 2020-09-28 添砖加码

书上偶然看到的

先上一张素材

DOM

<div class="loader">
            
</div>

@keyframes loader{
                
    to{background-position: -400px 0;}
}
.loader{
    margin: 0 auto;
    width: 50px;
    height: 50px;
                
    background: url(img/loader.png) 0 0;
    background-size: cover;
    animation: loader 1.2s infinite steps(8);
}

关键点是

animation: loader 1.2s infinite steps(8);

steps分布动画，每次50px，所以看起来就像是一个加载动画，试一试