Sistem Suria dalam CSS

Sistem Suria telah dilakukan dalam CSSbanyak- hanya cari Codepen! Jadi kenapa buat lagi?

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

Mari kita mulakan dengan beberapa markup yang sangat asas:

Kami menggunakansenarai tersusun, kerana planet-planet adalah teratur.

Seterusnya, kami menyahset gaya

lalai dan menggayakannya sebagai grid:


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

Salin selepas log masuk

Sekarang, untuk trajektori planet, kita akan menggunakan "tindanan grid". Daripada kedudukan: mutlak dan banyak terjemahan, kita bolehtindansemua item grid dengan:


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

Salin selepas log masuk

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

Salin selepas log masuk

Mari 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 — tidaksepenuhnyatepat, 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; }

Salin selepas log masuk

Dan kini kita ada:



Untukmenghidupkanplanet dengan kelajuan trajektori yang berbeza, kami menambah:


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

Salin selepas log masuk

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

1. adakah ini:
   

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

   Salin selepas log masuk

   Dan itu sahaja! Saya meminta ChatGPT untuk 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())
   • tambahkan transformasi: rotateX(angle) pada
     untuk menjadikannya pseudo-3D:

     

     ... dan mungkin gunakan 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!