Le système solaire en CSS

Le système solaire a été réalisé en CSSbeaucoupde fois — il suffit de rechercher Codepen ! Alors pourquoi recommencer ?

Parce que les choses s'améliorent et sont plus simples — et que nous pouvons désormais créer un système solaireresponsiveavec seulement quelques lignes de CSS.

Commençons par un balisage très basique :

Nous utilisons uneliste ordonnée, car les planètes sont dans l'ordre.

Ensuite, nous supprimons les styles

par défaut et les stylisons sous forme de grille :


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

Copier après la connexion

Maintenant, pour les trajectoires des planètes, nous allons utiliser une "grid stack". Au lieu de position : absolue, et un tas de traductions, nous pouvons simplementempilertous les éléments de la grille avec :


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

Copier après la connexion

En définissant une variable --d (pour le diamètre) par planète, en utilisant width: var(--d);, nous obtenons :



Cool ! Ajoutons les planètes en utilisant un pseudo-élément ::after :


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

Copier après la connexion

Demandons à ChatGPT de générer de jolis gradients radiaux pour chaque planète – et pendant que nous y sommes, disons que nous créons le système solaire et demandons des tailles planétaires comprises entre 1 et 6cqi – pascomplètementprécis, mais conservant toujours une différence importante et reconnaissable :


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

Copier après la connexion

Et maintenant nous avons :



Pouranimerles planètes avec des vitesses de trajectoire différentes, on ajoute :


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

Copier après la connexion

Remarquez le chemin de décalage. C'est laclépour simplifier les animations de trajectoire, car tout ce que nous avons à faire pour déplacer la planète le long de la forme du

1. c'est ça :
   

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

   Copier après la connexion

   Et c'est tout ! J'ai demandé à ChatGPT de calculer les timings basés sur "Neptune", avec une vitesse de rotation de 20 s — et nous obtenons :

   ---

   Conclusion

   Avec seulement quelques règles, nous avons créé une version simple en 2D du système solaire en CSS pur. Si vous souhaitez approfondir, vous pouvez :

   • utiliser des distances et des tailles réelles (avec calc())
   • ajouter une transformation : rotateX(angle) au
     pour le rendre pseudo-3D :

     

     ... et peut-être utiliser Matrix3D pour "réaplatir" les planètes ?

     Bon codage !

     Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!