效果

準備

首先寫出基本的CSS佈局

.outer-circle {
  margin: 50px auto;
  width: 300px;
  height: 300px;
  text-align: center;
  border-radius: 100%;
  background: palegoldenrod;
  position: relative;
}
.circle {
  position: absolute;
  left: 50px;
  top: 50px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: cadetblue;
  border-radius: 100%;
}
 

此時效果：

實現1

使用動畫實現transfrom: rotate(1turn)，這個時候的旋轉是圍繞自身進行旋轉，想讓小球圍繞大球的圓心旋轉，需要使用transform-origin屬性，使旋轉的中心剛好位於圓的中心

此時HTML需要兩個元素，當外層繞大球圓心轉動時，小球圍繞自身進行反向旋轉

HTML程式碼：

<div class="outer-circle">
  <div class="circle">
    <div class="inner-circle">Hello</div>
  </div>
</div>
 

CSS程式碼：

.outer-circle {
  margin: 50px auto;
  width: 300px;
  height: 300px;
  text-align: center;
  border-radius: 100%;
  background: palegoldenrod;
  position: relative;
}
.circle {
  position: absolute;
  left: 50px;
  top: 50px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: cadetblue;
  border-radius: 100%;
  animation: rotate 5s infinite linear;
  transform-origin: 100px 100px;
}
.inner-circle {
  animation: inherit;
  animation-direction: reverse;
}
@keyframes rotate {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}
 

實現2

不新增內層的<div>，直接使用transform實現，原理是

具體實現是就是先利用translate將旋轉中心與大圓中心重合，然後旋轉，之後又利用translate，移動到原先的位置，在圍繞自身中心進行反方向旋轉

此時的HTML不需要巢狀內層<div>了

<div class="outer-circle">
  <div class="circle">Hello</div>
</div>

此時的CSS程式碼不再設定transform-origin了

<style scoped>
.outer-circle {
  margin: 50px auto;
  width: 300px;
  height: 300px;
  text-align: center;
  border-radius: 100%;
  background: palegoldenrod;
  position: relative;
}
.circle {
  position: absolute;
  left: 50px;
  top: 50px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: cadetblue;
  border-radius: 100%;
  animation: rotate 5s infinite linear;
}
@keyframes rotate {
  from {
    transform: translate(100px, 100px) translate(-50%, -50%) rotate(0)
    translate(-100px, -100px) translate(50%, 50%) rotate(1turn)
  }
  to {
    transform: translate(100px, 100px) translate(-50%, -50%) rotate(1turn)
    translate(-100px, -100px) translate(50%, 50%) rotate(0)
  }
}

具體原理的講解參考這篇文章。

實現3

這種實現就是對第二種方法的簡化，直接將小球放到大球的中心，移動的時候只需要移動Y軸就可以了

此時CSS程式碼：

.outer-circle {
  display: inline-block;
  padding: 150px;
  margin: 50px auto;
  text-align: center;
  border-radius: 100%;
  background: palegoldenrod;
}
.circle {
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: cadetblue;
  border-radius: 100%;
  animation: rotate 5s infinite linear;
}
@keyframes rotate {
  from {
    transform: rotate(0turn) translateY(-150px) translateY(50%) rotate(1turn)
  }
  to {
    transform: rotate(1turn) translateY(-150px) translateY(50%) rotate(0turn)
  }
}

參考

• W3C - CSS祕密花園： 沿著路徑的動畫
• W3school - CSS3 transform-origin 屬性
• 簡書 - CSS實現圓周運動