Voici un exemple simple pour animer une icône de menu hamburger à l’aide de CSS:
HTML:
```
```
CSS:
```
.hamburger {
width: 30px;
height: 20px;
position: relative;
cursor: pointer;
}
.line {
width: 100%;
height: 2px;
background: #000;
display: block;
position: absolute;
transition: all 0.3s ease-in-out;
}
.line:nth-child(1) {
top: 0;
}
.line:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
.line:nth-child(3) {
bottom: 0;
}
.hamburger:hover .line:nth-child(2) {
width: 0%;
}
.hamburger:hover .line:nth-child(1) {
transform: translateY(10px) translateX(10px) rotate(45deg);
}
.hamburger:hover .line:nth-child(3) {
transform: translateY(-10px) translateX(10px) rotate(-45deg);
}
```
Dans cet exemple, l’icône de menu hamburger est constituée de trois “lignes” représentées par des éléments ``. Lorsque vous survolez l’icône avec la souris, le CSS modifie la largeur de la ligne du milieu et tourne les deux autres lignes pour créer un effet d’animation.
N’oubliez pas d’ajouter des propriétés “transition” à vos lignes pour que les changements de CSS puissent se faire progressivement.
