动画06 绕圆心运动的小球

效果

准备

首先写出基本的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 cl