如何使用CSS3代码制作页面圆圈加载动画

这篇文章主要为大家展示了“如何使用CSS3代码制作页面圆圈加载动画”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用CSS3代码制作页面圆圈加载动画”这篇文章吧。

    HTML部分：

    <divclass="loader">

    <divclass="loading">

    <i></i>

    <i></i>

    <i></i>

    <i></i>

    <i></i>

    <i></i>

    <i></i>

    <i></i>

    </div>

    </div>

    CSS部分：

    .loader{

    width:300px;

    border:1pxsolid#ccc;

    height:200px;

    display:flex;

    box-sizing:border-box;

    align-items:center;

    justify-content:center;

    }

    @-webkit-keyframesloading{

    50%{

    transform:scale(0.4);

    opacity:0.3;

    }

    100%{

    transform:scale(1);

    opacity:1;

    }

    }

    .loading{

    position:relative;

    }

    .loadingi{

    display:block;

    width:15px;

    height:15px;

    border-radius:50%;

    position:absolute;

    background:#333;

    }

    .loadingi:nth-child(1){

    top:25px;

    left:0;

    -webkit-animation:loading1sease0sinfinite;

    }

    .loadingi:nth-child(2){

    top:17px;

    left:17px;

    -webkit-animation:loading1sease0.12sinfinite;

    }

    .loadingi:nth-child(3){

    top:0;

    left:25px;

    -webkit-animation:loading1sease0.24sinfinite;

    }

    .loadingi:nth-child(4){

    top:-17px;

    left:17px;

    -webkit-animation:loading1sease0.36sinfinite;

    }

    .loadingi:nth-child(5){

    top:-25px;

    left:0;

    -webkit-animation:loading1sease0.48sinfinite;

    }

    .loadingi:nth-child(6){

    top:-17px;

    left:-17px;

    -webkit-animation:loading1sease0.6sinfinite;

    }

    .loadingi:nth-child(7){

    top:0;

    left:-25px;

    -webkit-animation:loading1sease0.72sinfinite;

    }

    .loadingi:nth-child(8){

    top:17px;

    left:-17px;

    -webkit-animation:loading1sease0.84sinfinite;

    }

以上是“如何使用CSS3代码制作页面圆圈加载动画”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！