Solar System Animation in Html & CSS: Sun, Earth and Moon

A solar system animation is a visual representation that simulates the dynamic movements of celestial bodies within our solar system. It typically includes the Sun, planets, and other celestial objects like moons or asteroids, illustrating their relative positions and orbits. Solar system animations are a great way to convey the complex interactions and movements that govern our cosmic neighborhood.

Solar System

Features of Solar System Animation

Key features of a solar system animation include:

Orbital Motion: The animation showcases the Earth and Moon in their respective orbits around the Sun.
Realistic Scales: While not explicitly mentioned in the code, maintaining realistic scales is a common consideration in solar system animations to accurately represent the vast distances and relative sizes of celestial bodies.
Rotation: The Earth rotates on its axis, and this rotation is illustrated in the animation.
Moons: The Moon orbits the Earth, demonstrating its own orbital motion.

These are the features highlighted in the provided code, which focuses on the orbits and movements of the Earth, Moon, and Sun within the solar system.

Html Code with Internal CSS

Html + CSS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Solar System</title>
<style>
  /* Created by Ateeq */

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(0, 0, 0);
    overflow: hidden;
  }

  .wrapper {
    position: relative;
    height: 40em;
    width: 40em;
    font-size: 10px;
  }

  .wrapper .sun {
    position: absolute;
    width: 10em;
    height: 10em;
    background-color: yellow;
    top: 15em;
    left: 15em;
    border-radius: 50%;
    box-shadow: 0 0 3em white;
  }

  .wrapper .earth,
  .wrapper .moon {
    position: absolute;
    border-style: solid;
    border-color: white transparent transparent transparent;
    border-width: 0.1em 0.1em 0 0;
    border-radius: 50%;
  }

  .wrapper .earth {
    top: 5em;
    left: 5em;
    width: 30em;
    height: 30em;
    animation: anim 36.5s linear infinite;
  }

  .wrapper .moon {
    top: 0;
    right: 0;
    width: 8em;
    height: 8em;
    animation: anim 2.7s linear infinite;
  }

  @keyframes anim {
    to {
      transform: rotate(360deg);
    }
  }

  .wrapper .earth::before,
  .wrapper .moon::before {
    content: "";
    position: absolute;
    border-radius: 50%;
  }

  .wrapper .earth::before {
    top: 2.8em;
    right: 2.8em;
    width: 3em;
    height: 3em;
    background-color: aqua;
  }

  .wrapper .moon::before {
    top: 0.8em;
    right: 0.2em;
    width: 1.2em;
    height: 1.2em;
    background-color: silver;
  }
</style>
</head>
<body>
<div class="wrapper">
  <div class="sun"></div>
  <div class="earth">
    <div class="moon"></div>
  </div>
</div>
</body>
</html>

Explanation

let’s divide the code into parts and explain each part separately:

Part 1: HTML Structure

This is the HTML structure of the web page.
It includes basic meta tags for character set and viewport settings.
The page title is set to “Solar System.”
The content of the web page is contained within the <body> element.
Inside the <body>, there is a <div> with the id="solar-system" that serves as the container for the entire solar system animation.
Within this container, there are nested <div> elements with unique id values for the Sun (id="sun"), Earth’s orbit (id="earth-orbit"), Earth (id="earth"), Moon’s orbit (id="moon-orbit"), and Moon (id="moon"). These elements represent the celestial bodies and their orbits.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Solar System</title>
</head>
<body>
    <div id="solar-system">
        <div id="sun"></div>
        <div id="earth-orbit">
            <div id="earth"></div>
            <div id="moon-orbit">
                <div id="moon"></div>
            </div>
        </div>
    </div>
</body>
</html>

Part 2: CSS Styling

This part contains CSS styles that define the appearance and animations of the solar system elements.
body styling removes default margins and hides overflow for a clean canvas.
#solar-system is styled to create a circular container with a border, and it has an animation called rotate-solar-system for a 360-degree rotation.
#sun represents the Sun and is styled with a background color (#ff9933) to give it a sun-like appearance. It has a pulsating animation (pulse-sun) for a scale effect.
#earth-orbit represents Earth’s orbit and is styled as a dashed circle.
#earth represents Earth and has a background color (#0072b5).
#moon-orbit represents the Moon’s orbit and is also styled as a dashed circle.
#moon represents the Moon and has a background color (#aaa).

CSS

body {
    margin: 0;
    overflow: hidden;
}

#solar-system {
    position: relative;
    width: 600px;
    height: 600px;
    margin: 100px auto;
    border: 1px solid #ccc;
    border-radius: 50%;
    animation: rotate-solar-system 10s linear infinite;
}

#sun {
    width: 120px;
    height: 120px;
    background-color: #ff9933;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -60px;
    margin-left: -60px;
    animation: pulse-sun 5s ease-in-out infinite;
}

#earth-orbit {
    width: 400px;
    height: 400px;
    border: 1px dashed transparent;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -200px;
    animation: orbit-earth-orbit 10s linear infinite;
}

#earth {
    width: 40px;
    height: 40px;
    background-color: #0072b5;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -20px;
    animation: orbit-earth 10s linear infinite;
}

#moon-orbit {
    width: 100px;
    height: 100px;
    border: 1px dashed transparent;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    animation: orbit-moon-orbit 2s linear infinite;
}

#moon {
    width: 20px;
    height: 20px;
    background-color: #aaa;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 50%;
    margin-top: -10px;
    margin-left: -10px;
    animation: orbit-moon 2s linear infinite;
}

Part 3: Keyframe Animations

This part defines keyframe animations using @keyframes for various elements.
rotate-solar-system rotates the entire solar system 360 degrees, creating a continuous loop.
pulse-sun makes the Sun pulse by scaling it up and down.
orbit-earth-orbit and orbit-moon-orbit rotate the orbits of Earth and Moon, respectively.
orbit-earth and orbit-moon control the orbital motion of Earth and Moon by rotating and translating them.

CSS

@keyframes rotate-solar-system {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse-sun {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

@keyframes orbit-earth-orbit {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes orbit-earth {
    0% {
        transform: rotate(0deg) translateX(200px) rotate(0deg);
    }
    100% {
        transform: rotate(360deg) translateX(200px) rotate(-360deg);
    }
}

@keyframes orbit-moon-orbit {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes orbit-moon {
    0% {
        transform: rotate(0deg) translateX(50px) rotate(0deg);
    }
    100% {
        transform: rotate(360deg) translateX(50px) rotate(-360deg);
    }
}

History of Java Programming Language

9 Planets Animated Solar System Using Html, CSS, Javascript

0 Comments

Inline Feedbacks

View all comments