我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！”
详细说明
从前有一家伙，坐在苹果树下，被一颗苹果砸到，从此地球引力就被发现了。不仅地球有引力，太阳也有引力，太阳周围的星球都有受到太阳的引力，围着太阳旋转。这次就来用css实现个简单的地球围着太阳旋转的效果。
首先，准备好结构，这个的HTML结构很少，一个大一点的圆圈包裹住太阳和地球，边线可作为地球的运行轨迹，一个太阳和一个地球。
上结构代码：
<div id="universe">
<div class="big-circle">
<div class="sun"></div>
<div class="earth"></div>
</div>
结构准备好之后，就可以开始整样式了。轨迹、太阳、地球都是球形状，border-radius: 50%; 一行代码变圆。太阳居中在容器的正中央，可以采用定位结合transform；地球就将它放到轨迹的边缘线上，也是采用定位结合transform的方式。
* {
margin: 0;
padding: 0;
}
#universe {
height: 100%;
width: 100%;
position: absolute;
background-color: black;
overflow: hidden;
}
.big-circle {
height: 500px;
width: 500px;
position: absolute;
left: 10%;
top: 10%;
transform: translateX(-50%);
border: 1px solid #ccc;
border-radius: 50%;
}
.sun {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #fffbde;
box-shadow: 0px 0px 20px #fffbde;
}
.earth {
width: 20px;
height: 20px;
background-color: skyblue;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translateY(-50%);
}
到了这一步，整体的样式就已经写好了，只不过都是静态的。现在就让地球动起来。这里可以使用css3的动画keyframes。这里我们需要让容器旋转起来，这样看起来就只是地球在围着太阳转
.big-circle {
animation: earth 20s linear infinite;
}
在补充上动画，
@keyframes earth
{
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
这样地球就能围着太阳转了
