SOURCE

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

.box{
    width: 100px;
    height: 100px;

    background-color: blue;

    position: absolute;
    left: 50%;
    top: 50%;

    transform: translate(-50%,-50%);

    overflow: hidden;
}

.box::after, .box:before{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 15%;
    width: 500%;
    height: 500%;
    border-radius: 45%;
    background-color: #fff;
    transform: translateX(-50%); /* 居中 */
    animation: rotate 15s linear infinite;
}

.box::before{
     bottom: 10%;
    opacity: .5;
    border-radius: 47%;
}

@keyframes rotate {
  from {
    transform: translateX(-50%) rotateZ(0deg);
  }

  to {
    transform: translateX(-50%) rotateZ(360deg);
  }
}