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