效果图
蓝色的背景下，红红的太阳在正中间，地球绕着太阳转，月亮绕着地球转~~不过转速什么的，当然经不起地理知识的推敲哈，大家也就看一个热闹。
代码实现：
首先在HTML里，定义div：
CSS样式文件中，先初始化整体背景：
```html
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #34e1ff;
overflow: hidden;
}
```
.container {
font-size: 10px;
width: 40em;
height: 40em;
position: relative;
}
此时在浏览器里按下调试键，可以看到如下效果：
正中间的div也就是我们的container。
接下来开始画太阳：
.sun {
position: absolute;
top: 15em;
left: 15em;
width: 10em;
height: 10em;
background-color: #fa0048;
border-radius: 50%;
box-shadow: 0 0 5em white;
}
其中，border-radius：50%画出了一个标准的圆，效果如下：
画出地球和月亮：
.earth::before,
.moon::before {
content: '';
position: absolute;
border-radius: 50%;
}
.earth::before {
top: 2.8em;
right: 2.8em;
width: 3em;
height: 3em;
background-color: #00a6ff;
}
.moon::before {
top: 0.8em;
right: 0.2em;
width: 1.2em;
height: 1.2em;
background-color: #fbf4ff;
}
效果如下：
画出地球和月亮的运行尾巴以及初始位置：
.earth,
.moon {
position: absolute;
border-style: solid;
border-color: white transparent transparent transparent;
border-width: 0.1em 0.1em 0 0;
border-radius: 50%;
}
/* !*rotation period 365.2422 days*!*/
.earth {
{!-- PGC_COLUMN --}
top: 5em;
left: 5em;
width: 30em;
height: 30em;
animation: orbit 36.5s linear infinite;
}
/*!* rotation period 27.322 days *!*/
.moon {
top: 0;
right: 0;
width: 8em;
height: 8em;
animation: orbit 2.7s linear infinite;
}
这里我们给地球的animation动画设置了时间为36.5s，月亮转一圈的时间为2.7s，用来模拟现实生活中地球绕太阳转一圈需要365.2422天，月亮绕地球转一圈需要27.322天。
此时效果如下：
最后，给地球和月亮加上动画：
@keyframes orbit {
to {
transform: rotate(1turn);
}
}
此时已经实现了所有的效果，再来一张动图感受下：
网友评论