css3-360体检旋转特效（一）

本文描述使用css3的渐进属性linear-gradient实现类似360资源检查时的特效

一、模拟实现效果参考

二、html代码

<div class="container">
    <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>

三、css代码

.container {
    width: 100px;
    height: 100px;
}

@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://codepen.io/wlei/pen/rdoGrz