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

Heim

Web-Frontend

CSS-Tutorial

Das Sonnensystem mit Orbit CSS

PHPz

Sep 05, 2024 am 06:00 AM

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!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Wie kann ich KB5055612 in Windows 10 nicht installieren?

4 Wochen vor By DDD

<🎜>: Bubble Gum Simulator Infinity - So erhalten und verwenden Sie Royal Keys

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

<🎜>: Wachsen Sie einen Garten - Komplette Mutationsführer

3 Wochen vor By DDD

Nordhold: Fusionssystem, erklärt

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Mandragora: Flüstern des Hexenbaum

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Java-Tutorial

1672

CakePHP-Tutorial

1428

Laravel-Tutorial

1332

PHP-Tutorial

1276

C#-Tutorial

1256

Related knowledge

Ein Vergleich statischer Formanbieter Apr 16, 2025 am 11:20 AM

Versuchen wir, hier einen Begriff zu prägen: "Statischer Formanbieter". Sie bringen Ihre HTML

Ein Beweis für das Konzept, um Sass schneller zu machen Apr 16, 2025 am 10:38 AM

Zu Beginn eines neuen Projekts erfolgt die SASS -Zusammenstellung im Blinzeln eines Auges. Dies fühlt sich gut an, besonders wenn es mit Browsersync kombiniert ist, das nachlädt

Wöchentliche Plattformnachrichten: HTML -Ladeattribut, die Haupt -ARIA -Spezifikationen und Wechsel von Iframe zu Shadow Dom Apr 17, 2025 am 10:55 AM

In der Zusammenfassung der Plattformnachrichten in dieser Woche stellt Chrome ein neues Attribut für das Laden, Zugänglichkeitspezifikationen für Webentwickler und die BBC -Bewegungen ein

Einige praktisch mit dem HTML-Dialogelement Apr 16, 2025 am 11:33 AM

Ich schaue mir das HTML -Element zum ersten Mal an. Ich habe es für eine Weile dessen bewusst, aber Haven ' Es wurde es noch nicht für einen Dreh genommen. Es hat einige ziemlich cool und

Papierform Apr 16, 2025 am 11:24 AM

Buy or Build ist eine klassische Technologiedebatte. Das Aufbau von Dingen selbst ist vielleicht billiger, weil Ihre Kreditkartenrechnung keine Werbebuchung gibt, aber

Wohin sollte 'Podcast' -Link abonnieren? Apr 16, 2025 pm 12:04 PM

Für eine Weile war iTunes der große Hund im Podcasting. Wenn Sie also "Abonnieren Sie Podcast" verlinkt haben, um zu mögen:

Wöchentliche Plattform News: Textabstand Lesezeichen, Top-Level-Erwartung, neuer Verstärker-Ladeindikator Apr 17, 2025 am 11:26 AM

In der Roundup in dieser Woche, einem praktischen Lesezeichen für die Inspektion von Typografie, unter Verwendung dessen, wie sich JavaScript -Module gegenseitig importieren, sowie Facebook ' s.

Optionen zum Hosting Ihrer eigenen nicht-javaScript-basierten Analysen Apr 15, 2025 am 11:09 AM

Es gibt eine Menge Analyseplattformen, mit denen Sie Besucher- und Nutzungsdaten auf Ihren Websites verfolgen können. Vielleicht vor allem Google Analytics, das weit verbreitet ist

See all articles