CSS让元素绕一个圆形的路径运动

[DestinyHunter]

<div class="path">
  <img src="https://www.w3cplus.com/sites/default/files/blogs/2015/1507/logo_w3cplus.png"  class="avatar"/>
</div>

@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;
    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;
}

https://www.w3cplus.com/css3/css-secrets/animation-along-a-circular-path.html