简单2d动画 ， 仿太阳绕地球旋转

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在旋转一样