loading画圆动画

html:

<div class='box'>
    <div class="box1"></div>
    <div class="box2">
    	<div class="circle">
    	</div>
    </div>
    <div class="box3"></div>
</div>

css:

body{
		background: black;
	}
   @keyframes moveover { 
	0% {
		transform:rotate(0deg);
		} 
	100% {
		transform:rotate(360deg);
		} 
		} 
  .box{
  position:relative;
  width:80px;
  height:80px;
  animation:moveover 3s linear infinite;
} 
.box1{
  position:absolute;
  width: 40px;
  height: 80px;
  border-radius:50px 0 0 50px;
  background: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0.6));
  z-index:2;
} 
.box2{
  position:absolute;
  width: 40px;
  height: 80px;
  border-radius:0 50px 50px 0;
  left:50%;
  background: linear-gradient(rgba(255,255,255,0.1),rgba(255,255,255,0.6));
  z-index:1;
} 
.circle{
	height:12px;
	width:12px;
	border-radius:100%;
	background: #red;
	position:absolute;
	left:-6px;
}
.box3{
  position:absolute;
  width:53px;
  height:53px;
  top:13px;
  left:13px;
  border-radius:50%;
  background-color: #000;
  z-index:2;
}

       注：在颜色的过渡方面有很明显的断层现象，希望能有大神帮忙解决了告知一下

本来以为css和less对css动画的定义方法不同，把问题想得过于复杂，浪费了很多时间，其实都是相通的。