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動畫的定義方法不同，把問題想得過于複雜，浪費了很多時間，其實都是相通的。