taichi.gif

普通方式

<div class="taichi">
    <div class="left"></div>
    <div class="right"></div>
</div>

.taichi{
    margin: 80px auto;
    width: 200px;
    height: 100px;
    border-width: 1px 1px 100px 1px;
    border-style: solid;
    position: relative;
    border-radius: 50%;
    animation: rotate 2s linear infinite;
}

.left,
.right {
    position: absolute;
    top: 50px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.left {
    background-color: #FFFFFF;
    border: 40px solid #000000;
    left: 0;
}

.right {
    background-color: #000000;
    border: 40px solid #FFFFFF;
    right: 0;
}

高级方式：使用伪类:before 和 :after

<div class="taichi"></div>

.taichi {
    margin: 80px auto;
    width: 200px;
    height: 100px;
    border-width: 1px 1px 100px 1px;
    border-style: solid;
    position: relative;
    border-radius: 50%;
    animation: rotate 2s linear infinite;
}

.taichi:before,
.taichi:after{
    position: absolute;
    top: 50px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.taichi:before,
.taichi:after {
    content: '';
}

.taichi:before{
    background-color: #FFFFFF;
    border: 40px solid #000000;
    left: 0;
}

.taichi:after{
    background-color: #000000;
    border: 40px solid #FFFFFF;
    right: 0;
}

旋转动画

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