Das Sonnensystem in CSS

Das Sonnensystem wurde oftin CSS erstellt – suchen Sie einfach nach Codepen! Warum also noch einmal?

Weil die Dinge besser und einfacher werden – und wir jetzt mit nur wenigen CSS-Zeilen ein responsives Sonnensystem erstellen können.

Beginnen wir mit einigen sehr einfachen Markups:

<ol>
  <li class="sun"></li>
  <li class="mercury"></li>
  <li class="venus"></li>
  <li class="earth"></li>
  <li class="mars"></li>
  <li class="jupiter"></li>
  <li class="saturn"></li>
  <li class="uranus"></li>
  <li class="neptune"></li>
</ol>

Wir verwenden eine geordnete Liste, da die Planeten in der richtigen Reihenfolge sind.

Als nächstes deaktivieren wir die standardmäßigen

-Stile und gestalten sie als Raster:


ol {
  all: unset;
  aspect-ratio: 1 / 1;
  container-type: inline-size;
  display: grid;
  width: 100%;
}

Für die Planetenbahnen verwenden wir nun einen „Gitterstapel“. Anstelle von position: absolute und einer Reihe von Übersetzungen können wir einfach alle Rasterelemente stapeln mit:


li {
  grid-area: 1 / -1;
  place-self: center;
}

Durch das Festlegen einer --d-Variablen (für den Durchmesser) pro Planet und der Verwendung von width: var(--d); erhalten wir:



Cool! Fügen wir die Planeten mit einem ::after-Pseudoelement:
hinzu

li::after {
  aspect-ratio: 1 / 1;
  background: var(--b);
  border-radius: 50%;
  content: '';
  display: block;
  width: var(--w, 2cqi);
}

Lassen Sie uns ChatGPT bitten, für jeden Planeten ein paar schöne radiale Verläufe zu generieren – und wenn wir schon dabei sind, sagen wir ihm, dass wir das Sonnensystem erschaffen, und fragen nach Planetengrößen zwischen 1 und 6 cqi – nicht vollständig genau, aber immer noch mit einem beträchtlichen, erkennbaren Unterschied:


.mercury {
  --b: radial-gradient(circle, #c2c2c2 0%, #8a8a8a 100%);
  --w: 2.0526cqi;
}

.venus {
  --b: radial-gradient(circle, #f4d03f 0%, #c39c43 100%);
  --w: 2.6053cqi;
}

.earth {
  --b: radial-gradient(circle, #3a82f7 0%, #2f9e44 80%, #1a5e20 100%);
  --w: 3.1579cqi;
}

.mars {
  --b: radial-gradient(circle, #e57373 0%, #af4448 100%);
  --w: 3.7105cqi;
}

.jupiter {
  --b: radial-gradient(circle, #d4a373 0%, #b36d32 50%, #f4e7d3 100%);
  --w: 4.8158cqi;
}

.saturn {
  --b: radial-gradient(circle, #e6dba0 0%, #c2a13e 100%);
  --w: 5.3684cqi;
}

.uranus {
  --b: radial-gradient(circle, #7de3f4 0%, #3ba0b5 100%);
  --w: 4.2632cqi;
}

.neptune {
  --b: radial-gradient(circle, #4c6ef5 0%, #1b3b8c 100%);
  --w: 6cqi;
}

Und jetzt haben wir:



Um die Planeten mit unterschiedlichen Fluggeschwindigkeiten zu animieren, fügen wir Folgendes hinzu:


li::after {
  /* previous styles */
  animation: rotate var(--t, 3s) linear infinite;
  offset-path: content-box;
}

Beachten Sie den Offset-Pfad. Das ist der Schlüssel zur Vereinfachung der Flugbahnanimationen, denn alles, was wir tun müssen, um den Planeten entlang der Form des

1. ist das:
   

   @keyframes rotate {
     to {
       offset-distance: 100%;
     }
   }
   

   Und das ist alles! Ich habe ChatGPT gebeten, die Timings basierend auf „Neptun“ mit einer Rotationsgeschwindigkeit von 20 Sekunden zu berechnen – und wir erhalten:

   ---

   Abschluss

   Mit nur wenigen Regeln haben wir eine einfache 2D-Version des Sonnensystems in reinem CSS erstellt. Wenn Sie tiefer eintauchen möchten, können Sie:

   • Verwenden Sie echte Abstände und Größen (mit calc())
   • Fügen Sie eine Transformation hinzu: rotationX(angle) zum
     um es pseudo-3D zu machen:

     

     ... und vielleicht Matrix3D verwenden, um die Planeten „wieder abzuflachen“?

     Viel Spaß beim Codieren!

     Das obige ist der detaillierte Inhalt vonDas Sonnensystem in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!