Sistem Suria dalam CSS

Sistem Suria telah dilakukan dalam CSS banyak kali — hanya cari Codepen! Jadi kenapa buat lagi?

Kerana keadaan menjadi lebih baik dan mudah — dan kini kami boleh melakukan sistem solar responsif dengan hanya beberapa baris CSS.

Mari kita mulakan dengan beberapa markup yang sangat asas:

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

Kami menggunakan senarai tersusun, kerana planet-planet adalah teratur.

Seterusnya, kami menyahset

-styles lalai dan menggayakannya sebagai grid:


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

Sekarang, untuk trajektori planet, kita akan menggunakan "tindanan grid". Daripada kedudukan: mutlak dan sekumpulan terjemahan, kita boleh tindan semua item grid dengan:


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

Dengan menetapkan --d-pembolehubah (untuk diameter) setiap planet, menggunakan lebar: var(--d);, kita mendapat:



Sejuk! Mari tambah planet menggunakan ::selepas unsur pseudo:


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

Mari kita minta ChatGPT menjana beberapa gred jejari yang bagus untuk setiap planet — dan sementara kami melakukannya, katakan kami sedang mencipta Sistem Suria dan meminta saiz planet antara 1 dan 6cqi — bukan sepenuhnya tepat, tetapi masih mengekalkan perbezaan yang besar dan boleh dikenali:


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

Dan kini kami mempunyai:



Untuk menghidupkan planet dengan kelajuan trajektori yang berbeza, kami menambah:


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

Perhatikan laluan offset. Itulah kunci untuk memudahkan trajektori-animasi, kerana apa yang kita perlu lakukan untuk menggerakkan planet mengikut bentuk

1. adakah ini:
   

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

   Dan itu sahaja! Saya meminta ChatGPT mengira pemasaan berdasarkan "Neptune", dengan kelajuan putaran 20s — dan kami mendapat:

   ---

   Kesimpulan

   Dengan hanya beberapa peraturan, kami mencipta versi 2d Sistem Suria yang ringkas dalam CSS tulen. Jika anda ingin menyelam lebih dalam, anda boleh:

   • gunakan jarak dan saiz sebenar (dengan calc())
   • tambah transformasi: rotateX(sudut) pada
     untuk menjadikannya pseudo-3D:

     

     ... dan mungkin menggunakan matrix3d ​​untuk "meratakan semula" planet?

     Selamat mengekod!

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