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

<div class="containertj">    <div class="status-circle st沈泉庄村atus-1">      <div class="cir兔年春联cle 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