Das Sonnensystem mit Orbit CSS-CSS-Tutorial-php.cn

In diesem Tutorial erfahren Sie, wie Sie mit HTML, CSS und dem Orbit CSS-Framework ein animiertes Sonnensystem erstellen. Inspiriert von den vielfältigen und kreativen Visualisierungen des Sonnensystems, die ich auf Dev.to gesehen habe, dachte ich, es wäre großartig, dem Universum eine weitere hinzuzufügen?.

Haftungsausschluss: Dieses Projekt ist eine vereinfachte Darstellung unseres Sonnensystems mit den wichtigsten Planeten (mit Ausnahme von Zwergplaneten) und ist nicht als präzise astronomische Simulation gedacht.

Schritt 1: Projekteinrichtung

Erstellen Sie zunächst eine HTML-Datei, in die Sie den Code für unser Sonnensystem einfügen. Verknüpfen Sie außerdem die Orbit-CSS-Datei im Kopf Ihres HTML-Dokuments.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>The Solar System</title>
   <link rel="stylesheet" href="https://unpkg.com/@zumer/orbit@latest/dist/orbit.css">
</head>
<body>
   <div class="bigbang">
   <!-- Solar system here -->
   </div>
</body>
</html>

Nach dem Login kopieren

Alternativ können Sie die Codepen Orbit-Startervorlage verwenden

Schritt 2: HTML-Struktur des Sonnensystems

Innerhalb des Div mit der Klasse .bigbang beginnen wir mit dem Hinzufügen von Elementen, die die Planeten, ihre Umlaufbahnen und Satelliten darstellen. Dazu verwenden wir einige Orbit-Elemente.

<div class="bigbang">
  <div class="gravity-spot from-3x">
    <div class="orbit-0">
      <div class="satellite sun grow-3x"></div>
    </div>
    <div class="orbit-1">
      <div class="satellite mercury shrink-60"></div>
    </div>
  </div>
</div>

Nach dem Login kopieren

Im obigen Code ist die .bigbang-Klasse der Ursprung unseres Projekts. Darin haben wir einen .gravity-spot hinzugefügt, der ein Gravitationszentrum darstellt, und .orbit-0, das eine Umlaufbahn im Zentrum der Gravitationskraft darstellt. Danach fügten wir .satellite und .sun hinzu, um unsere Sonne zu präsentieren. Als nächstes haben wir .orbit-1 erstellt, eine Umlaufbahn nahe der Mitte mit einem kleinen Radius. Und darin haben wir Merkur platziert.

Beachten Sie, dass es einige Orbit-Dienstprogrammklassen wie from-3x, .grow-3x und Shrink-60 gibt. Diese werden verwendet, um das radiale Layout und die Elementgrößen anzupassen. Beispielsweise gibt .from-3x an, dass Umlaufbahnen mit einem Versatz von drei Umlaufbahnlängen beginnen. .grow-3x gibt an, dass die Sonne eine Größe von drei Umlaufbahnen haben wird, und .shrink-60 gibt an, dass Merkur eine Größe von 40 % einer Umlaufbahn haben wird.

Nachdem wir alle Umlaufbahnen und Planeten fertiggestellt haben, erhalten wir Folgendes:

The Solar System with Orbit CSS

Monde, Ringe und Asteroiden hinzufügen
Einige Planeten wie die Erde, der Mars, der Jupiter, der Saturn, der Uranus und der Neptun haben Monde. Diese können in ein Element der Klasse .gravity-spot eingefügt werden, um die Schwerkraft des Planeten zu simulieren. Bedenken Sie, dass wir nur einige Monde erschaffen werden, nicht alle.

<div class="orbit-3">
    <div class="satellite earth">
       <div class="gravity-spot">
          <div class="orbit-1 shrink-30 ">
            <div class="satellite shrink-70 moon"></div>
          </div>
       </div>
    </div>
</div>

Nach dem Login kopieren

Hier haben wir den Mond auf unserem Planeten erstellt und einige Hilfsklassen verwendet, um Layout und Größen anzupassen.

Jetzt ist es an der Zeit, Saturn und Neptun Ringe hinzuzufügen.

<div class="orbit-14">
   <div class="satellite neptune grow-0.1x">
      <div class="gravity-spot ring">
         <div class="orbit-1 shrink-30"></div>
      </div>
    </div>
</div>

Nach dem Login kopieren

Schließlich fügen wir viele Asteroiden hinzu, um den Asteroidengürtel nachzubilden

<div class="orbit-6 asteroid-belt">
   <div class="satellite shrink-90"></div>
   <div class="satellite shrink-70"></div>
   <div class="satellite shrink-80"></div>
   <div class="satellite shrink-90"></div>
   <!— … —>
</div>
<div class="orbit-6 from-40 asteroid-belt"></div>
<div class="orbit-6 from-20 asteroid-belt"></div>
<!— … —>

Nach dem Login kopieren

Hier verwenden wir eine neue Utility-Klasse: from-*, die es ermöglicht, einen Startwinkel festzulegen und eine Illusion zufälliger Asteroiden zu erzeugen.

Nachdem wir alle Monde, Ringe und Asteroiden hinzugefügt haben, haben wir Folgendes:

The Solar System with Orbit CSS

Schritt 3: Gestaltung des Sonnensystems

Hier benötigen wir einige echte Bilder der Sonne und der Planeten. Zuerst habe ich versucht, diese Bilder zu verschieben, um die interne Rotation zu simulieren, aber die Eigenschaft „Hintergrundposition“ zu animieren ist für CPUs sehr kostspielig, daher entscheide ich mich, animierte GIFs zu verwenden, um ein Überlasten der CPUs zu vermeiden und eine reibungslose Animation zu gewährleisten. In Orbit gibt es eine spezielle Klasse namens .capsule, die innerhalb eines Satelliten verwendet wird, um umfangreiche Inhalte hinzuzufügen.

Erde

    <div class="orbit-3">
      <div class="satellite earth">
        <div class="capsule ">
          <div class="surface"></div>
        </div>
      </div>
    </div>

Nach dem Login kopieren

.earth .surface {
  background: url("https://media.tenor.com/0we9sWcmUtYAAAAi/wingedratsecrettag-earth.gif");
  background-size: auto 100%;
}

Nach dem Login kopieren

** 3D-Effekt **

Um eine 3D-Illusion zu erzeugen, verwenden wir einige CSS-Verläufe:

.sun:before,
.surface:before {
  content: "";
  position: absolute;
  top: 1%;
  left: 5%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 0px,
    yellow,
    rgba(255, 255, 255, 0) 58%
  );
  -webkit-filter: blur(5px);
  z-index: 2;
}
.sun:after,
.surface:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(
    circle at 50% 30%,
    rgba(245, 237, 48, 0),
    rgba(200, 190, 20, 0.2) 50%,
    #575300 100%
  );
}

Nach dem Login kopieren

Nachdem wir alle Bilder platziert haben, erhalten wir Folgendes:

The Solar System with Orbit CSS

Schritt 4: Animieren des Sonnensystems

Verwenden Sie CSS-Animationen, um die Planeten und ihre Monde um die Sonne kreisen zu lassen. Erstellen Sie zunächst eine @keyframe-Animation:

@keyframes rotate {
  to {
    rotate: 360deg;
  }
}

Nach dem Login kopieren

Fügen Sie dann jedem Planeten und der Sonne eine Animationseigenschaft hinzu. Bedenken Sie, dass es notwendig ist, eine „Gegen“-Animation in die Klasse „planet.capsule“ einzufügen, damit sie stabilisiert werden können. Beachten Sie, dass es nicht notwendig ist, eine Kapsel und eine „Gegen“-Animation einzuschließen, da sich die Sonne nur um ihre Achse dreht.

.earth {
  --t: 6315.79ms;
  animation: rotate var(--t, 20s) linear reverse infinite;
}

.capsule {
  animation: rotate var(--t, 20s) linear infinite;
}

Nach dem Login kopieren

Jetzt haben wir ein animiertes 2D-Sonnensystem:

The Solar System with Orbit CSS

Schritt 5: Perspektive

Um realistischer zu sein, können wir eine Perspektive auf .bigbang und eine Trasnform:RotateX-Eigenschaft auf die Sonne, Mondbahnen und Planeten verwenden, um einen Pseudo-3D-Effekt zu erzeugen.

.bigbang {
  perspective: 150px;
  perspective-origin: 50% 100%;
}

.gravity-spot {
  transform: rotateX(10deg);
   transform-style: preserve-3d;
}

.orbit-0 {
  transform: rotateX(-5deg);
}

Nach dem Login kopieren

Herzlichen Glückwunsch!! Dies ist die endgültige Darstellung unseres Sonnensystems.

Abschluss

Dieses Tutorial hat Sie durch die Erstellung eines animierten Sonnensystems mit HTML, CSS und dem Orbit CSS-Framework geführt. Ich hoffe, Sie fanden es interessant und unterhaltsam. Orbit wurde entwickelt, um nahezu jede Art von radialen Schnittstellen zu erstellen. Schauen Sie sich also um und lassen Sie mich wissen, wenn Sie etwas damit erstellen!

Credits:

Orbit-Repo
Entwicklerartikel: Das Sonnensystem in CSS
Entwicklerartikel: Sonnensystem mit Threejs
CSSanimation: Kugeln

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