Sistem Suria dengan Orbit CSS

Dalam tutorial ini, anda akan belajar cara mencipta sistem suria animasi menggunakan HTML, CSS dan rangka kerja CSS Orbit. Diilhamkan oleh visualisasi sistem suria yang pelbagai dan kreatif yang saya lihat di Dev.to, saya fikir adalah bagus untuk menambah satu lagi pada alam semesta ?.

Penafian: Projek ini ialah perwakilan ringkas Sistem Suria kita, yang menampilkan planet-planet utama (tidak termasuk planet kerdil) dan tidak bertujuan untuk menjadi simulasi astronomi yang tepat.

Langkah 1: Persediaan Projek

Mulakan dengan mencipta fail HTML di mana anda akan memasukkan kod untuk sistem suria kami. Juga, pautkan fail CSS Orbit dalam kepala dokumen HTML anda.

   <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">


   <div class="bigbang">
   <!-- Solar system here -->
   </div>

Sebagai alternatif, anda boleh menggunakan templat pemula Codepen Orbit

Langkah 2: Struktur HTML Sistem Suria

Di dalam div dengan kelas .bigbang, kami mula menambah elemen yang mewakili planet, orbit dan satelitnya. Untuk melakukan itu, kami akan menggunakan beberapa elemen Orbit.

<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>

Dalam kod di atas, kelas .bigbang ialah asal projek kami. Di dalamnya, kami menambah titik .graviti yang mewakili pusat graviti, dan .orbit-0 yang merupakan orbit di pusat daya graviti. Selepas itu, kami menambah .satelit dan .matahari untuk membentangkan Matahari kita. Seterusnya, kami mencipta .orbit-1 iaitu orbit berhampiran dengan pusat dengan jejari kecil. Dan di dalamnya kami meletakkan Mercury.

Perhatikan bahawa terdapat beberapa kelas utiliti Orbit seperti from-3x, .grow-3x dan shrink-60. Ia digunakan untuk melaraskan susun atur jejari dan saiz elemen. Contohnya, .from-3x menunjukkan bahawa orbit akan bermula dengan offset tiga panjang orbit. .grow-3x menunjukkan bahawa Matahari akan mempunyai saiz tiga orbit, dan .shrink-60 menunjukkan bahawa Mercury mempunyai saiz 40% orbit.

Selepas melengkapkan semua orbit dan planet, kita akan mempunyai ini:

Menambah Bulan, Cincin dan Asteroid
Sesetengah planet, seperti Bumi, Marikh, Musytari, Zuhal, Uranus, dan Neptun, mempunyai bulan. Ini boleh dimasukkan ke dalam elemen dengan kelas .graviti-titik untuk mensimulasikan graviti planet. Perlu diingat bahawa kami akan mencipta beberapa bulan sahaja, bukan kesemuanya.

<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>

Di sini kami mencipta Bulan di planet kita dan menggunakan beberapa kelas utiliti untuk melaraskan reka letak dan saiz.

Kini tiba masanya untuk menambah cincin pada Zuhal dan Neptun.

<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>

Akhir sekali, kami menambah banyak asteroid untuk mencipta semula tali pinggang asteroid

<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>

Di sini kami menggunakan satu kelas utiliti baharu: dari-* yang membenarkan menetapkan sudut permulaan dan menjana ilusi asteroid rawak.

Selepas menambah semua bulan, cincin dan asteroid, kami mempunyai ini:

Langkah 3: Menggayakan Sistem Suria

Di sini kita memerlukan beberapa imej sebenar Matahari dan planet. Pada mulanya, saya cuba mengalihkan imej tersebut untuk mensimulasikan putaran dalaman, tetapi menganimasikan sifat kedudukan latar belakang adalah sangat mahal untuk CPU, jadi saya memutuskan menggunakan gif animasi untuk mengelakkan CPU menggoreng dan mengekalkan animasi yang lancar. Dalam Orbit terdapat kelas khas yang dipanggil .kapsul yang digunakan di dalam satelit, untuk menambah kandungan yang kaya.

Bumi

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

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

** Kesan 3D **

Untuk menjana ilusi 3D kami menggunakan beberapa kecerunan css:

.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%
  );
}

Selepas kami meletakkan semua imej, kami memperoleh ini:

Langkah 4: Menghidupkan Sistem Suria

Gunakan animasi CSS untuk menjadikan planet dan bulannya mengorbit mengelilingi Matahari. Mula-mula buat animasi @keyframe:

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

Kemudian tambahkan sifat animasi pada setiap planet dan Matahari. Perlu diingat bahawa adalah perlu untuk memasukkan animasi "kaunter" pada kelas .kapsul planet untuk membolehkannya distabilkan. Ambil perhatian bahawa memandangkan Matahari hanya berputar pada paksinya tidak perlu memasukkan .kapsul dan animasi "kaunter".

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

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

Kini kami mempunyai sistem suria 2D animasi:

Langkah 5: Perspektif

Untuk menjadi lebih realistik, kita boleh menggunakan perspektif tentang .bigbang dan trasnform: sifat rotateX pada Matahari, orbit bulan dan planet untuk menjana kesan 3D pseudo.

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

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

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

Tahniah!! Ini adalah perwakilan terakhir Sistem Suria kita.

Kesimpulan

Tutorial ini telah membimbing anda mencipta sistem suria animasi menggunakan HTML, CSS dan rangka kerja CSS Orbit. Saya harap anda mendapati ia menarik dan menyeronokkan. Orbit direka bentuk untuk mencipta hampir semua jenis antara muka jejari, jadi lihat dan beritahu saya jika anda mencipta sesuatu dengannya!

Kredit:

• Repo orbit
• Artikel Dev: Sistem Suria dalam CSS
• Artikel Dev: Sistem Suria dengan Threejs
• CSanimation: Sfera

Atas ialah kandungan terperinci Sistem Suria dengan Orbit CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!