@keyframes sector {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(180deg);
  }
}
.circel-wrp {
  width: 100%;
  height: 100%;
  // background-color: brown;
  // border-radius: 50%;
  position: absolute;
  .circel-circel {
    width: 98%;
    height: 98%;
    background-color: brown;
    border-radius: 50%;
    left: 1%;
    top: 1%;
    position: absolute;
    z-index: 98;
  }
  .left-circel-wrp {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    .left-circel {
      // width: 300px;
      // height: 150px;
      position: absolute;
      left: 0;
      top: 0;
      transform-origin: 100% 50%;
      animation: sector 1s linear 1s forwards;
    }
  }

  .right-circel-wrp {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    .right-circel {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      transform-origin: 0 50%;
      animation: sector 1s linear 0s forwards;
    }
  }
  .mid-circel {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
    .con-circel {
      width: 100%;
      height: 100%;
      background-color: #ffffff;
      border-radius: 50%;
    }
  }
}
