css 类似于360安全体检的动画

<div class="containertj">
    <div class="status-circle status-1">
      <div class="circle rotary-circle"></div>
      <div class="circle content-circle">
        <div class="circle detail-circle">体检中..</div>
      </div>
    </div>
  </div>





.containertj {
  width: 126px;
  height: 126px;
}

@keyframes rotary {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.status-circle {
  position: relative;
  height: 100%;
}

.circle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
}

.rotary-circle {
  height: 100%;
  box-sizing: border-box;
  animation: rotary 2s infinite;
  -webkit-animation: rotary 2s infinite;
}

.content-circle {
  position: absolute;
  top: 1%;
  left: 1%;
  width: 98%;
  height: 98%;
  background: #fff;
}

.detail-circle {
  width: 90%;
  height: 90%;
  color: #fff;
}

.status-1 .detail-circle {
  background: rgb(68, 218, 111);
}

.status-1 .rotary-circle {
  background: -webkit-linear-gradient(
    left,
    rgba(68, 218, 111, 1),
    rgba(68, 218, 111, 0) 50%,
    rgba(68, 218, 111, 1)
  );
  background: -o-linear-gradient(
    left,
    rgba(68, 218, 111, 1),
    rgba(68, 218, 111, 0) 50%,
    rgba(68, 218, 111, 1)
  );
  background: -ms-linear-gradient(
    left,
    rgba(68, 218, 111, 1),
    rgba(68, 218, 111, 0) 50%,
    rgba(68, 218, 111, 1)
  );
  background: linear-gradient(
    left,
    rgba(68, 218, 111, 1),
    rgba(68, 218, 111, 0) 50%,
    rgba(68, 218, 111, 1)
  );
}

本文地址：https://blog.csdn.net/qq_32184753/article/details/107637224