完成效果:

代码:

<!--外部容器-->
<div class="container">
<!-- 动画容器-->
 <div class="box">
<!-- 外-->
 <i></i>
<!-- 内-->
 <i></i>
 </div>
<!-- 文字-->
 <span>加载中...</span>
</div>

代码:

<style type="text/css">
 /*外部容器样式*/
 .container{
 width: 300px;
 height: 300px;
 background-color: #99999952;
 border: 1px solid #999;
 margin: 40px auto;
 font-size: 10px;
 /*内部元素居中*/
 flex-direction: column;
 display: flex;
 justify-content: center;
 align-items: center;
 }
 /*动画元素容器样式*/
 .box{
 width: 100px;
 height: 100px;
 position: relative;
 }
 /*动画元素样式*/
 .box > i{
 display: block;
 border: 2px solid #333;
 position: absolute;
 border-radius: 50%;
 }
 /*动画:旋转180度缩放0.6倍*/
 @keyframes anim {
 0%{
 transform: rotate(0) scale(1);
 }
 50%{
 transform: rotate(180deg) scale(0.6);
 }
 100%{
 transform: rotate(360deg) scale(1);
 }
 }
 /*两个动画元素各自的样式*/
 .box i:nth-child(1){
 width: 60px;
 height: 60px;
 left: 20px;
 top: 20px;
 /*transparent为透明*/
 border-color:transparent #FF386D;
 animation: anim 1s infinite 0s ease-in-out;
 }
 .box i:nth-child(2){
 width: 20px;
 height: 20px;
 left: 40px;
 top: 40px;
 border-color: transparent #00C3FF;
 /*reverse反向 调用动画*/
 animation: anim 1s infinite 0.5s ease-in-out reverse;
 }
</style>

这是一个纯CSS的曲线旋转loading动画

胜象大百科