css3 同心圆旋转(1)

<style>
*{
margin:0;
padding:0;
}
@keyframes spin{
from{
transform: rotate(0turn) translateY(-150px) translateY(50%) rotate(1turn);
}
to {
transform: rotate(1turn) translateY(-150px) translateY(50%) rotate(0turn);
}
}
.avatar {
animation: spin 3s infinite linear;
}
.avatar {
display: block;
width: 50px;
height:50px;
line-height:50px;
text-align: center;
color:#fff;
background:#000;
margin: calc(50% - 25px) auto 0;
border-radius: 50%;
overflow: hidden;
}

.path {
width: 300px;
height: 300px;
padding: 20px;
margin: 100px auto;
border-radius: 50%;
background: #fb3;
}
</style>

 

<div class="path">
<div class="avatar">
<div>w3c</div>
</div>
<!--<div class="avatar">
<div>w3c</div>
</div>-->
</div>