运行效果：
为了更好的理解 下一个圆形的动画
HTML
<div class="demo0">
<div class="a">
<div></div>
</div>
<div class="b">
<div></div>
</div>
<div class="c">
<div></div>
</div>
</div>
CSS:
* {
padding: 0;
margin: 0;
}
.demo0 {
position: relative;
margin: 100px auto;
background: rgba(100, 100, 100, 0.4);
width: 200px;
height: 200px;
}
.a,
.b,
.c {
position: absolute;
top: 50%;
left: 50%;
/*border-radius: 50%;*/
border: 1px solid #0DAF90;
}
.a {
width: 180px;
height: 180px;
margin: -90px 0 0 -90px;
animation: zhuan 3s linear infinite;
}
.b {
width: 140px;
height: 140px;
margin: -70px 0 0 -70px;
animation: zhuan 2s linear infinite;
}
.c {
width: 80px;
height: 80px;
margin: -40px 0 0 -40px;
animation: zhuan 1s linear infinite;
}
.a>div,.b>div,.c>div{
width: 10px;
height: 10px;
background: #0DAF90;
/*border-radius: 50%;*/
position: absolute;
left: 50%;
top:-5px;
margin-left: -5px ;
}
@keyframes zhuan{
from{
transform: rotateZ(0);
}
to{
transform: rotateZ(360deg);
}
}
