纯css实现一个八卦动画loading

纯css实现一个八卦动画loading

2、通过伪元素实现两个黑白色的圆，并且利用flex弹性盒子来布局，然后通过背景色以及边框来实现中间的小圆

3、利用css3的transform:scale()做大小的缩放

4、分别给父盒子以及两个圆添加动画，记得让第二个圆的执行时间和第一个错开

HTML代码

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

CSS代码

body{
    background: #333;
}
.box{
    width: 150px;
    height: 150px;
    margin: 100px auto;
    border-radius: 50%;
    background: linear-gradient(to right,#fff 50%,#000 0);
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: box 2s linear infinite;
}
.box:before, .box:after{
    content: '';
    flex: 1;
    width: 50%;
    border-radius: 50%;
    box-sizing: border-box;
    background: #000;
    border: 28px solid #fff;
    animation: circle 1s ease-in-out infinite alternate;
    transform: scale(0.5,0.5);
}
.box:before{
    transform-origin: top center;
}
.box:after{
    animation-delay: -1s;
    transform-origin: bottom center;
    border-color: #000;
    background: #fff;
}
@keyframes box {
    100%{
        transform: rotate(360deg);
    }
}
@keyframes circle{
    100%{
        transform: scale(1.5);
    }
}