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