我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

来一个加载动画，希望对小伙伴们日后写等候界面有所帮助，功能实现简明大气，具有较强的实用性。

效果图

是不是十分的简明，大气，实用性好，下面就是相关的代码环节了。

代码块

代码解析来了

建立HTML

我们的第一步就是建立一个容器，建立我们写样式的基础。

  <div class="box"></div>

为容器美化

基础圆

   body{height: 100vh;
        display: flex;
        justify-content: center;
        
        align-items: center;
        background: linear-gradient(65deg, rgb(115, 219, 217),rgb(212, 228, 94));
    }
    .box{
        position: relative;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        border: 5px solid transparent;
       border-top-color: aqua;
       animation: move 2s linear  infinite;
    }

1. 在这我们先将容器布局好，在这我们使用的依旧是弹性布局flex,这个可以让我们的容器简单快速的居中。
2. 然后我们将容器通过border-radius: 50%;效果，使其变成一个圆，
3. 再用transparent将边框线设置为透明。最后border-top-color将其顶部设置颜色。

伪元素做的圆

.box::before{
        content: "";
        position: absolute;
        left: 5px;
        top: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 5px solid transparent;
       border-top-color:navy;
       animation: move 3s linear  infinite;
    }

在这里我们用伪元素做圆，

1. 注意是content而不是contain在这里我检查了20分钟，如果用错了，那么另两将线将会显示不出
2. 在这我们一定要用绝对布局，让伪元素移动5px,这样可以避免三条线重合在一起。
3. 移动距离一定要合理，不然效果就没了。

动画

 @keyframes move {
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }

这个动画就十分的简单了，就是利用rotate旋转效果，使线条动画起来；这就形成了我们在封面所看到的效果。

结束语

最后还是希望大家动起来，实践出真知，加深对代码的熟悉的。