Cet exercice consiste à reconstruire un décor avec des éléments fournies au format SVG, puis d’en faire l’animation via CSS.
DémonstrationConsignes 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.
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.
VoitureCré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.
AccidentSauf mention contraire*, l'article Voiture SVG et animations CSS [CSS22] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons
Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International
Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.
* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.