Le système solaire en CSS

Je te propose ici de mettre en pratique les animations CSS en recréant une version simplifiée du système solaire.

Le Soleil et en rotation autour,  les planètes telluriques (Mercure,Vanus, Terre, Mars) et même la Lune !

Si besoin, le code : Notre système solaire

Tu as essayé de le faire par toi même ?

Je te montre comment je m'y prends pour ma part :

🛠️ Explication rapide

Dans ce projet, on utilise :

✅ Les animations CSS pour faire tourner les planètes autour du Soleil
✅ Les ombres et les trajectoires pour un rendu plus esthétique
✅ Une classe utilitaire .centered pour simplifier le positionnement

🌞 On commence par le Soleil

On crée un cercle jaune lumineux grâce à box-shadow et une animation qui le fait briller de manière pulsée.

🪐 Ajout des planètes

On place Mercure, Vénus, la Terre et Mars avec des tailles et couleurs différentes.
Les orbites sont simplement des div avec border-radius et une animation de rotation.

🌙 La Lune

Elle est intégrée dans la Terre et suit le même principe : une rotation plus rapide autour de notre planète.

🎨 Personnalisation

Amuse-toi à :

🔹 Ajuster la vitesse de rotation pour correspondre aux vraies périodes orbitales
🔹 Ajouter d’autres planètes comme Jupiter ou Saturne
🔹 Modifier les couleurs et effets lumineux

Bref, amuse -toi !