css3教程，一个利用animation动画做的loading效果

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

本文描述一个利用css3的animation特性写的一个loading效果，效果非常不错，建议学习。css的动画虽然也是以普通css代码方式使用的，但是它有着自己的独特逻辑。

苏南大叔的程序如此灵动博客，记录苏南大叔和计算机代码的故事。测试环境：chrome@107.0.5304.88。

最小结构单元

<div class="loading">
    <span></span>
</div>
<style>
    @keyframes load {
        25% {
            border-radius: 50%;
            background-color: #dba617;
        }

        50% {
            border-radius: 0;
            background-color: black;
        }
    }

    .loading {
        width: 105px;
        height: 105px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .loading span {
        width: 50px;
        height: 50px;
        background-color: rgb(255, 255, 255);
        animation: load 5s linear infinite;
    }
</style>

重点在于：首先定义动画load的内容:

@keyframes load{}

然后再调用：

animation: load 5s linear infinite;

其中的5s就是用来执行一个周期的动画的时长。

而span正常情况下是个inline的布局，所以，通过flex的方式，使得span支棱起来。关于flex布局的解读，请参考：

• https://newsn.net/say/css-flex.html

复制多个，呼吸效果

复制多个span，每个应用都这个动画，然后使用animation-delay属性设置不同的动画延迟。

span:nth-child(1) {
    animation-delay: 0.5s;
}
span:nth-child(2) {
    animation-delay: 1s;
}
span:nth-child(3) {
    animation-delay: 1.5s;
}
span:nth-child(4) {
    animation-delay: 2s;
}

其中css中的nth-child是从1开始计数的，这个和以往的认知概念有所不同。参考文字：
https://newsn.net/say/css-nth-child.html

完整代码

<div class="loading">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
<style>
    .loading {
        width: 105px;
        height: 105px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    @keyframes load {
        25% {
            border-radius: 50%;
            background-color: #dba617;
        }

        50% {
            border-radius: 0;
            background-color: black;
        }
    }

    .loading span {
        width: 50px;
        height: 50px;
        background-color: rgb(255, 255, 255);
        animation: load 5s linear infinite;
        /* animation-delay: 0.5s; */
    }

    span:nth-child(1) {
        animation-delay: 0.5s;
    }

    span:nth-child(2) {
        animation-delay: 1s;
    }

    span:nth-child(3) {
        animation-delay: 1.5s;
    }

    span:nth-child(4) {
        animation-delay: 2s;
    }
</style>

结束语

更多css教程文章，请点击苏南大叔的博客：

• https://newsn.net/tag/css/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。