Voiture SVG et animations CSS CSS22

Cet exercice consiste à reconstruire un décor avec des éléments fournies au format SVG, puis d’en faire l’animation via CSS.

_

Voir le code par Julien Crego (@crego) sur CodePen.

Consignes de l’exercice

Vous pouvez effectuer cet exercice en suivant deux méthodes différentes… Vous trouverez ci-dessous le lien de téléchargement des fichiers. Choisissez donc bien les fichiers correspondant à la méthode que vous souhaitez utiliser.

Fichiers de travail

Construisez une page web contenant l’illustration SVG avec la méthode de votre choix :

  • Méthode 1 : Vous pouvez partir d’un fichier unique .ai ou .svg.
  • Méthode 2 : Vous pouvez démarrer à partir de morceaux d’images décomposés dans des fichiers .ai ou .svg séparés.

Gérer les animations des différents éléments pour obtenir un résultat sensiblement identique à l’exemple ci-dessous :

Voir le code par Julien Crego (@crego) sur CodePen.

Créez une copie de votre animation et effectuer les modifications nécessaires afin d’obtenir le résultat ci-dessous. Cliquez pour relancer l’animation.

Voir le code par Julien Crego (@crego) sur CodePen.

 

Cela peut vous intéresser :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.