CSS3动画之小圆随着大圆转动

首先点此查看效果

主要原理

利用animation实现转动，然后通过transform-origin设置旋转的原点
点此查看如何使用transform-origin。

代码实现

html结构

 <div class="circle-box">
      <div class="big-circle"></div>
      <div class="small-circle"></div>
 </div>

css样式

.circle-box{
    position: absolute;
    left: 50%;
    top: 200px;
    transform: translate(-50%, 0);
}
.big-circle{
    width: 100px;
    height: 100px;
    background: red;
    border-radius: 50%;
}
.small-circle{
    position: absolute;
    left: 0;
    top: 50%;
    margin-left: -5px;
    margin-top: -5px;
    width: 10px;
    height: 10px;
    background: blue;
    border-radius: 50%;
    /*animation: autoCircle 2s infinite linear;*/
    /*transform-origin: 55px 5px;*/
}
@keyframes autoCircle {
    0%{ transform: rotate(0deg); }
    100%{ transform: rotate(360deg);}
}

为了方便理解，在不添加动画之前，可以先调整样式，把小圆放在大圆上。然后再添加动画，设置旋转原点即可。