<div class="container">

    <div class="ring"></div>

    <div class="spheres">

        <span class="sphere"></span>

        <span class="sphere"></span>

        <span class="sphere"></span>

    </div>

</div>

html, body {

    margin:;

    padding:;

}

body {

    height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: darkslategray;

}

/* 改变盒模型 为元素设定的宽度和高度包括了外内外边距 */

*{

    box-sizing: border-box;

}

/* 画出圆环 */

.container{

    position: relative;

    font-size: 20px;

    /* 最后，让容器转动起来，制造小球围绕圆环盘旋的效果 */

    animation: rotate 5s linear infinite;

}

.ring{

    position: relative;

    width: 10em;

    height: 10em;

    border: 1.5em solid paleturquoise;

    border-radius: 50%;

    z-index:;

}

/* 在圆环的左上方画出一个小球 */

.sphere{

    position: absolute;

    top: -20%;

    left: -20%;

    /* 让小球盘旋 */

    width: 80%;

    height: 80%;

    animation:

        rotate 1.5s linear infinite,

        overlapping 1.5s linear infinite;

}

/* 通过设置动画延时，制造 3 个小球同时盘旋的效果 */

.sphere:nth-child(2){

    animation-delay: -0.5s;

}

.sphere:nth-child(3) {

    animation-delay: -1s;

}

@keyframes rotate{

    to{

        transform: rotate(360deg);

    }

}

/* 让小球的圆环的上下穿梭 */

@keyframes overlapping {

  to {

      z-index:;

  }

}

.sphere::after{

    content: '';

    position: absolute;

    width: 3em;

    height: 3em;

    border-radius: 50%;

    background-color: lightseagreen;

}