Création d'une animation d'orbite terrestre avec CSS

Introduction

Dans ce projet, vous apprendrez à créer une animation CSS qui simule l'orbite de la Terre autour du Soleil. Ce projet vous aidera à comprendre les concepts des animations CSS et à les appliquer pour créer une expérience web dynamique et visuellement attrayante.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous apprendrez :

• Comment configurer l'animation pour l'élément .earth-con
• Comment utiliser la règle @keyframes pour l'animation orbit afin de créer la rotation de la Terre autour du centre

🏆 Réalisations

Après avoir terminé ce projet, vous serez en mesure de :

• Créer une animation CSS qui simule l'orbite de la Terre autour du Soleil
• Comprendre les concepts des animations CSS et savoir les appliquer pour créer des expériences web dynamiques et visuellement attrayantes
• Coordonner plusieurs propriétés CSS pour obtenir l'effet d'animation souhaité

Configurer la structure du projet

Pour commencer, ouvrez l'environnement d'expérience, et la structure du répertoire est la suivante :

├── css
│   └── style.css
└── index.html

Où :

• index.html est la page principale.
• css/style.css est le fichier CSS dans lequel vous devez ajouter du code.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle (VM) et actualisez manuellement la page pour voir l'effet suivant dans votre navigateur :

Configurer l'animation

Dans cette étape, vous apprendrez à ajouter l'animation à l'élément .earth-con dans le fichier css/style.css.

1. Ouvrez le fichier css/style.css dans l'éditeur de code, faites défiler jusqu'au bas du code et vous verrez que orbit est la règle @keyframes déjà fournie et que cette règle @keyframes définit la séquence d'animation.

2. Localisez la classe .earth-con dans le fichier CSS.

3. À l'intérieur de la classe .earth-con, ajoutez les propriétés CSS suivantes pour définir l'animation :

   animation: orbit 36.5s linear infinite;
   

   • animation-name (nom de l'animation) : orbit
   • animation-duration (durée de l'animation) : 36.5s
   • animation-timing-function (fonction de temporisation de l'animation) : linear
   • animation-iteration-count (nombre d'itérations de l'animation) : infinite

Cela fera tourner l'élément .earth-con autour du centre de l'écran, simulant l'orbite de la Terre autour du Soleil.

4. Enregistrez le fichier style.css.
5. Revenez à votre navigateur et actualisez la page. Vous devriez voir l'effet suivant :

Résumé

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires (labs) sur LabEx pour améliorer vos compétences.