CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Créer une Animation de Menu en CSS

Créer une Animation de Menu en CSS

Un menu avec du contenu généré - 1
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre CSS 3
Revoir le teaser Je m'abonne
4,5
Transcription
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,5
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Animation de Menu au Survol

Objectifs

Les objectifs de cette vidéo sont de :
- Apprendre à utiliser les pseudoclasses after et hover en CSS.
- Comprendre comment créer des animations fluides avec les propriétés transition et width.
- Savoir appliquer une barre de survol animée sur les éléments de menu de navigation.

Résumé

Découvrez comment créer une animation de menu visible au survol de la souris avec CSS. Apprenez à manipuler les pseudoclasses after et hover.

Description

Dans cette leçon, nous allons apprendre à créer une animation pour un menu en HTML et CSS. Le menu affichera une barre colorée qui s’étend progressivement de 0 à 100 % de la largeur de chaque élément de menu lorsque l'utilisateur passe la souris dessus. Pour obtenir cet effet, nous utiliserons plusieurs techniques CSS, dont les pseudoclasses after et hover, ainsi que les propriétés display, background-color, et transition.

Nous allons commencer par créer une structure HTML de base comprenant une liste ul avec des éléments li. Ensuite, nous insérerons un pseudo-élément après chaque élément du menu à l’aide de la pseudoclasse after. Ce pseudo-élément sera initialement invisible et prendra de la consistance seulement au survol.

Nous définirons également une transition de 0,3 secondes pour rendre l’animation plus fluide. À la fin de cette leçon, vous saurez comment manipuler les styles CSS pour créer des effets de survol dynamiques et attrayants sur vos menus de navigation.

Voir plus

Questions - réponses

Pourquoi utilise-t-on la pseudoclasse after pour cette animation ?
La pseudoclasse after permet d'insérer un contenu après l'élément sans modifier le HTML, ce qui est idéal pour ajouter des effets visuels comme une barre de survol.
Quelle propriété CSS rend l’animation fluide ?
La propriété CSS transition permet de créer des animations fluides en définissant des interférences de temps sur les changements de propriétés CSS.
Comment rendre le pseudo-élément invisible à l'état initial ?
On peut rendre le pseudo-élément invisible à l'état initial en définissant sa largeur à 0 pixels.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 5 months
Commentaire
La formation est divisée en 90 modules sans lien entre eux et sans progression pédagogique. Il faut les réorganiser par thème pour donner plus de cohérence et donner de la progression pédagogique à la formation. Multiples fautes d'orthographe dans les textes.
henridjithat
Il y a 1 year
Commentaire
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 years
Commentaire
J'en suis arrivé au bout.. Un vrai marathon. Très longue formation, à mon avis c'est plutôt 30h de cours et non pas 15h.
Après c'est une formation hyper claire et détaillée. L'auteur a fait un panorama complêt sur le CSS3.
g.vanleynseele
Il y a 3 years
Commentaire
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !