Pure CSS Sun‑Earth‑Moon Orbital Animation Tutorial
This article demonstrates how to create a pure‑CSS animation of the Sun, Earth and Moon orbital motion using simple HTML divs, Flexbox/Grid layout, gradient colors, and CSS keyframe animations, with full source code and styling details provided.
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:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Mancuoj</title>
<link
href="simulation.css"
rel="stylesheet"
/>
</head>
<body>
<h1>Mancuoj</h1>
<figure>
<div></div>
<div>
<div></div>
</div>
</figure>
</body>
</html>The CSS starts by importing the Lobster font and defining the background and container styles:
@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;
}Specific styles for the Sun, Earth and Moon set their sizes, gradient colors, borders, and animation parameters, while pseudo‑elements create the visible spheres:
.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);
}The author also provides a list of online resources for gradient color palettes and encourages readers to experiment with the code.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
php Courses
php中文网's platform for the latest courses and technical articles, helping PHP learners advance quickly.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.