Animated Solar System In Pure CSS – solar.css

Preview:

Description:

An animated solar system built using HTML and CSS/CSS3. Hovering over the solar object you will see the details about the planet (distance to the Sun, average diameter, and length of year).

How to use it:

1. Download and import the solar.css into the document.

<link rel="stylesheet" href="assets/css/solar.css" />

2. The HTML for the solar system.

<div class="solar-container">
  <div class="solar-caption solar-mercury">
    <div class="solar-object"></div>
    <div class="solar-name c-hand">Mercury</div>
    <div class="solar-card solar-mercury">
      <div class="solar-name">Mercury</div>
      <div class="card-subtitle">The Swiftest Planet</div>
      <div class="card-head">Distance to the Sun</div>
      <div class="card-body">57 909 000 km</div>
      <div class="card-head">Average diameter</div>
      <div class="card-body">4 879.4 km</div>
      <div class="card-head">Length of year</div>
      <div class="card-body">88 Earth days</div>
    </div>
  </div>
  <div class="solar-caption solar-venus">
    <div class="solar-object"></div>
    <div class="solar-name c-hand">Venus</div>
    <div class="solar-card solar-venus">
      <div class="solar-name">Venus</div>
      <div class="card-subtitle">Planetary Hot Spot</div>
      <div class="card-head">Distance to the Sun</div>
      <div class="card-body">108 160 000 km</div>
      <div class="card-head">Average diameter</div>
      <div class="card-body">12 103.6 km</div>
      <div class="card-head">Length of year</div>
      <div class="card-body">225 Earth days</div>
    </div>
  </div>
  <div class="solar-caption solar-earth">
    <div class="solar-object"></div>
    <div class="solar-name c-hand">Earth</div>
    <div class="solar-card solar-earth">
      <div class="solar-name">Earth</div>
      <div class="card-subtitle">Our Home Planet</div>
      <div class="card-head">Distance to the Sun</div>
      <div class="card-body">149 600 000 km</div>
      <div class="card-head">Average diameter</div>
      <div class="card-body">12 756.3 km</div>
      <div class="card-head">Length of year</div>
      <div class="card-body">365 Earth days</div>
    </div>
  </div>
  <div class="solar-caption solar-mars">
    <div class="solar-object"></div>
    <div class="solar-name c-hand">Mars</div>
    <div class="solar-card solar-mars">
      <div class="solar-name">Mars</div>
      <div class="card-subtitle">The Red Planet</div>
      <div class="card-head">Distance to the Sun</div>
      <div class="card-body">227 990 000 km</div>
      <div class="card-head">Average diameter</div>
      <div class="card-body">6 792.4 km</div>
      <div class="card-head">Length of year</div>
      <div class="card-body">687 Earth days</div>
    </div>
  </div>
  <div class="solar-caption solar-jupiter">
    <div class="solar-object"></div>
    <div class="solar-name c-hand">Jupiter</div>
    <div class="solar-card solar-jupiter">
      <div class="solar-name">Jupiter</div>
      <div class="card-subtitle">Twice as massive as all the other planets combined</div>
      <div class="card-head">Distance to the Sun</div>
      <div class="card-body">778 360 000 km</div>
      <div class="card-head">Average diameter</div>
      <div class="card-body">142 984 km</div>
      <div class="card-head">Length of year</div>
      <div class="card-body">4 333 Earth days</div>
    </div>
  </div>
  <div class="solar-caption solar-saturn">
    <div class="solar-object"></div>
    <div class="solar-name c-hand">Saturn</div>
    <div class="solar-card solar-saturn">
      <div class="solar-name">Saturn</div>
      <div class="card-subtitle">Jewel of Our Solar System</div>
      <div class="card-head">Distance to the Sun</div>
      <div class="card-body">1 433 500 000 km</div>
      <div class="card-head">Average diameter</div>
      <div class="card-body">120 536 km</div>
      <div class="card-head">Length of year</div>
      <div class="card-body">10 759 Earth days</div>
    </div>
  </div>
  <div class="solar-caption solar-uranus">
    <div class="solar-object"></div>
    <div class="solar-name c-hand">Uranus</div>
    <div class="solar-card solar-uranus">
      <div class="solar-name">Uranus</div>
      <div class="card-subtitle">The Sideways Planet</div>
      <div class="card-head">Distance to the Sun</div>
      <div class="card-body">2 872 400 000 km</div>
      <div class="card-head">Average diameter</div>
      <div class="card-body">51 118 km</div>
      <div class="card-head">Length of year</div>
      <div class="card-body">30 687 Earth days</div>
    </div>
  </div>
  <div class="solar-caption solar-neptune">
    <div class="solar-object"></div>
    <div class="solar-name c-hand">Neptune</div>
    <div class="solar-card solar-neptune">
      <div class="solar-name">Neptune</div>
      <div class="card-subtitle">The Windiest Planet</div>
      <div class="card-head">Distance to the Sun</div>
      <div class="card-body">4 498 400 000 km</div>
      <div class="card-head">Average diameter</div>
      <div class="card-body">49 528 km</div>
      <div class="card-head">Length of year</div>
      <div class="card-body">60 190 Earth days</div>
    </div>
  </div>
  <div class="solar-system">
    <div class="solar-orbit solar-sun">
      <div class="solar-object"></div>
    </div>
    <div class="solar-orbit solar-mercury">
      <div class="solar-object"></div>
    </div>
    <div class="solar-orbit solar-venus">
      <div class="solar-object"></div>
    </div>
    <div class="solar-orbit solar-earth">
      <div class="solar-object">
        <div class="solar-orbit solar-moon">
          <div class="solar-object"></div>
        </div>
      </div>
    </div>
    <div class="solar-orbit solar-mars">
      <div class="solar-object"></div>
    </div>
    <div class="solar-orbit solar-asteroidbelt"></div>
    <div class="solar-orbit solar-jupiter">
      <div class="solar-object"></div>
    </div>
    <div class="solar-orbit solar-saturn">
      <div class="solar-object"></div>
    </div>
    <div class="solar-orbit solar-uranus">
      <div class="solar-object"></div>
    </div>
    <div class="solar-orbit solar-neptune">
      <div class="solar-object"></div>
    </div>
  </div>
</div>

Changelog:

04/15/2020

• Data updated