Cet exercice consiste à utiliser des animations CSS pour faire vivre un « chien » dessiné en HTML et CSS.
ChienConsignes de l’exercice
Téléchargez le fichier .html contenant le dessin du chien ci-dessous :
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.
Observez bien, ci-dessous, les animations des différents éléments constituant le chien et reproduisez-les. Vous pouvez ajouter autant d’effets que vous le souhaitez.
ChienCorrection
La correction de l’exercice est disponible en cliquant sur le bouton ci-dessous.
La correction proposée est au format SCSS. Pour afficher le code CSS, veuillez cliquer sur le bouton View Compiled en bas à droite de la fenêtre.
Sauf mention contraire*, l'article Animations CSS : Chien [CSS08] 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.