Sistem Suria dengan Orbit CSS-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

Sistem Suria dengan Orbit CSS

PHPz

Sep 05, 2024 am 06:00 AM

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.

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

Salin selepas log masuk

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>

Salin selepas log masuk

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:

The Solar System with Orbit CSS

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>
<!— … —>

Salin selepas log masuk

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:

The Solar System with Orbit CSS

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>

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

Selepas kami meletakkan semua imej, kami memperoleh ini:

The Solar System with Orbit CSS

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

Salin selepas log masuk

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

Salin selepas log masuk

Kini kami mempunyai sistem suria 2D animasi:

The Solar System with Orbit CSS

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

Salin selepas log masuk

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!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Bagaimana untuk memperbaiki KB5055612 gagal dipasang di Windows 10?

4 minggu yang lalu By DDD

<🎜>: Bubble Gum Simulator Infinity - Cara Mendapatkan dan Menggunakan Kekunci Diraja

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

<🎜>: Tumbuh Taman - Panduan Mutasi Lengkap

3 minggu yang lalu By DDD

Nordhold: Sistem Fusion, dijelaskan

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers of the Witch Tree - Cara Membuka Kunci Cangkuk Bergelut

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Tutorial Java

1672

Tutorial CakePHP

1428

Tutorial Laravel

1332

Tutorial PHP

1277

Tutorial C#

1256

Tunjukkan Lagi

Related knowledge

Perbandingan pembekal bentuk statik Apr 16, 2025 am 11:20 AM

Mari kita cuba menyusun istilah di sini: "Penyedia Borang Statik." Anda membawa html anda

Bukti konsep untuk menjadikan sass lebih cepat Apr 16, 2025 am 10:38 AM

Pada permulaan projek baru, kompilasi SASS berlaku dalam sekejap mata. Ini terasa hebat, terutamanya apabila ia dipasangkan dengan BrowserSync, yang dimuat semula

Berita Platform Mingguan: Atribut Memuat HTML, Spesifikasi ARIA Utama, dan Bergerak Dari IFRAME ke Shadow Dom Apr 17, 2025 am 10:55 AM

Pada minggu ini, berita platform, Chrome memperkenalkan atribut baru untuk memuatkan, spesifikasi aksesibiliti untuk pemaju web, dan gerakan BBC

Beberapa tangan dengan elemen dialog HTML Apr 16, 2025 am 11:33 AM

Ini saya melihat elemen HTML untuk kali pertama. Saya telah menyedarinya untuk seketika, tetapi Haven ' t mengambilnya untuk putaran lagi. Ia mempunyai cukup keren dan

Kertas kerja Apr 16, 2025 am 11:24 AM

Beli atau Membina adalah perdebatan klasik dalam teknologi. Membina barang sendiri mungkin berasa lebih murah kerana tidak ada item baris pada bil kad kredit anda, tetapi

Berita Platform Mingguan: Bookmarket Jarak Teks, Menunggu Tahap Teratas, Penunjuk Memuatkan AMP Baru Apr 17, 2025 am 11:26 AM

Pada minggu ini, roundup, sebuah bookmarklet yang berguna untuk memeriksa tipografi, menggunakan menunggu untuk mengamuk dengan cara modul JavaScript mengimport satu sama lain, ditambah Facebook ' s

Di manakah 'Langgan Podcast' pautan ke? Apr 16, 2025 pm 12:04 PM

Untuk sementara waktu, iTunes adalah anjing besar dalam podcasting, jadi jika anda mengaitkan "Langgan Podcast" untuk suka:

Pilihan untuk menganjurkan analisis berasaskan bukan JavaScript anda sendiri Apr 15, 2025 am 11:09 AM

Terdapat banyak platform analisis untuk membantu anda mengesan data pelawat dan penggunaan di laman web anda. Mungkin paling penting Google Analytics, yang digunakan secara meluas

See all articles