持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第24天，点击查看活动详情

地球绕着太阳公转，月球绕着地球公转，今天就来模拟一下地球、日、月的运行轨迹，当时只是一个大概的样子，离精准比例还差很多。

公转轨迹

地球绕太阳公转,周期约等于365天；月球绕地球公转,周期约27天7小时。

结构

因为提到了地球、日、月公转，所以代码准备了嵌套结构，如下：

<div class="container">
    <div class="sun">
        <div class="earth">
            <div class="month"></div>
        </div>
    </div>
</div>

样式

因为画日、月、地球它们有很多共同的地方，所以我们首先要准备一个公用样式，如下：

.sun,
.earth,
.month {
    border: var(--border) solid rgb(134, 131, 131);
    border-radius: 50%;
    background: radial-gradient(var(--color), var(--color) 2%, transparent 10%),
        linear-gradient(to right, var(--color), transparent 5%);
}

然后，我们需要把太阳及其它周围的轨迹给画出来，如下：

.sun {
    --size: 20rem;
    --border: 0.1rem;
    --color: gold;
    width: var(--size);
    height: var(--size);
    position: relative;
    animation: _rotate1 36s linear infinite;
}

在刚开始画的时候，可以先把animate给去掉，太阳的动画效果就是绕着自身中心点旋转，如下：

@keyframes _rotate1 {
    100% {
        transform: rotate(360deg);
    }
}

最后，要把月、地球的样式及其轨迹画出来，如下：

.earth,
.month {
    position: absolute;
    width: 60%;
    height: 60%;
    left: 50%;
    top: 50%;
}

.earth {
    --color: rgb(15, 117, 235);
    animation: _rotate2 3s linear infinite;
}

.month {
    --color: #fff;
    animation: _rotate2 2s linear infinite;
}

同样，一开始的时候动画也先去掉，它们的运动的中心点需要位移到父级的轨迹上，如下：

@keyframes _rotate2 {
    0% {
        transform: translate(31%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(31%, -50%) rotate(360deg);
    }
}

效果

效果及其代码详情，如下：

总结

在这个效果中，我们需要注意的是：

1. 日、月、地球旋转一周的大概时间比例。

2. 地球、月的旋转中心的要位移到其父级的运动轨迹线上。

轨迹线带有一点颜色是为了更好的看到运动的效果，也可以给一周都加上，不过要做颜色区分，只有这样才会看到运动变化。