Astuces pratiques de développement Web

Auteur: Mohamed CHINY Durée necessaire pour le cours de Astuces pratiques de développement Web Niveau recommandé pour le cours de Astuces pratiques de développement Web Supports vidéo disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz non disponibles pour ce cours

Page 10: Formulaire d'authentification avec un arrière-plan animé en CSS

Toutes les pages

Animer l'image d'arrière-plan avec CSS

Les animations CSS

Dans le cours de CSS nous avons vu qu'il est possible de créer facilement des animations époustouflantes. En effet, depuis CSS3 il est possible de créer des animations complexes sans faire appel au Javascript. La propriété animation associée à la règle @keyframes permet de personnaliser une animation en spécifiant des styles-clés sur une durée et une fréquence bien déterminées.

Animer l'image d'arrière-plan

Dans cette astuce nous allons donner lieu à une animation en agissant sur le cercle des couleurs d'image d'arrière-plan. Nous allons à cet effet faire appel à la propriété filter que nous avons traité dans la leçon consacrée aux filtres CSS. Pour changer les couleurs on fera appel à la fonction hue-rotate() qui permet de décaler les couleurs comme si elles étaient définies sur un cercle.

Passons à la pratique