body 部分

 <div class="universe">
	<div class="sun">
		<div class="earth">
		</div>
	</div>
 </div>

style 部分

<style media="screen">

        .universe {
          margin: 0 auto;
          margin-top: 100px;
          height: 200px;
          width: 200px;
          border-radius: 50%;
          border: 1px solid transparent;
          position: relative;
          animation: circle 3s ease infinite
        }
        .sun {
          height: 100px;
          width: 100px;
          border-radius: 50%;
          left: 50%;
          top: 50%;
          margin-top: -50px;
          margin-left: -50px;
          background: radial-gradient(red, yellow, #f09635);
          position: absolute;
        }
        .earth {
          height: 20px;
          width: 20px;
          border-radius: 50%;
          left: -60px;
          top: 40px;
          background: radial-gradient(blue, #00c1ff, green);
          position: absolute;
        }

        @keyframes circle {
          from {
            transform: rotate(0);
          }
          to {
            transform: rotate(360deg);
          }
        }
</style>
 

思路 ， 外圍設定一個祖父級div ， 位置相對定位； sun 與 earth 絕對定位 ， 位置固定 ， earth在祖父border線上 。 只需旋轉祖父級div ， 那麼效果看起來就像earth在旋轉一樣