Pure CSS Sun‑Earth‑Moon Orbital Animation Tutorial

In celebration of the Mid‑Autumn Festival, the author shares a pure‑CSS implementation that visualizes the orbital motion of the Sun, Earth and Moon.

The animation relies on basic HTML (three div elements) and CSS, using Flexbox and Grid for layout, gradient backgrounds for coloring, border lines for orbits, and CSS @keyframes for continuous rotation.

The complete HTML markup is:

<code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8"/&gt;
        &lt;title&gt;Mancuoj&lt;/title&gt;
        &lt;link
            href="simulation.css"
            rel="stylesheet"
        /&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;h1&gt;Mancuoj&lt;/h1&gt;
        &lt;figure&gt;
            &lt;div&gt;&lt;/div&gt;
            &lt;div&gt;
                &lt;div&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/figure&gt;
    &lt;/body&gt;
&lt;/html&gt;</code>

The CSS starts by importing the Lobster font and defining the background and container styles:

<code>@import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap");

h1 {
    color: white;
    font-size: 60px;
    font-family: Lobster, monospace;
    font-weight: 100;
}
body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2f3141;
}
.container {
    font-size: 10px;
    width: 40em;
    height: 40em;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}</code>

Specific styles for the Sun, Earth and Moon set their sizes, gradient colors, borders, and animation parameters, while pseudo‑elements create the visible spheres:

<code>.sun {
    position: absolute;
    width: 10em;
    height: 10em;
    background: linear-gradient(#fcd670, #f2784b);
    border-radius: 50%;
    box-shadow: 0 0 8px 8px rgba(242, 120, 75, 0.2);
}
.earth {
    --diameter: 30;
    --duration: 36.5;
}
.moon {
    --diameter: 8;
    --duration: 2.7;
    top: 0.3em;
    right: 0.3em;
}
.earth,
.moon {
    position: absolute;
    width: calc(var(--diameter) * 1em);
    height: calc(var(--diameter) * 1em);
    border-width: 0.1em;
    border-style: solid solid none none;
    border-color: silver transparent transparent transparent;
    border-radius: 50%;
    animation: orbit linear infinite;
    animation-duration: calc(var(--duration) * 1s);
}
@keyframes orbit {
    to {
        transform: rotate(1turn);
    }
}
.earth::before {
    --diameter: 3;
    --color: linear-gradient(#19b5fe, #7befb2);
    --top: 2.8;
    --right: 2.8;
}
.moon::before {
    --diameter: 1.2;
    --color: linear-gradient(#8d6e63, #ffe0b2);
    --top: 0.8;
    --right: 0.2;
}
.earth::before,
.moon::before {
    content: "";
    position: absolute;
    width: calc(var(--diameter) * 1em);
    height: calc(var(--diameter) * 1em);
    background: var(--color);
    border-radius: 50%;
    top: calc(var(--top) * 1em);
    right: calc(var(--right) * 1em);
}</code>

The author also provides a list of online resources for gradient color palettes and encourages readers to experiment with the code.