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.

Consignes de l’exercice

Téléchargez les fichiers nécessaires pour effectuer l’exercice ci-dessous :

Vous pouvez effectuer cet exercice en suivant deux méthodes différentes… Choisissez donc bien les fichiers correspondant à la méthode que vous souhaitez utiliser.

Fichiers de travail

Aide pour télécharger un fichier :
– Pour télécharger un fichier, faites un clic droit sur le fichier désiré et choisissez l’option Télécharger.
– Pour télécharger plusieurs fichiers, sélectionnez les fichiers désirés puis cliquez sur Télécharger les sélectionnés. Les fichiers seront téléchargés sous la forme d’une archive .zip. Veillez à bien extraire le contenu de l’archive avant de commencer à travailler.

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.

Créez une copie de votre dessin et effectuez les modifications nécessaires afin d’obtenir le résultat ci-dessous.

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