Dino Geek essaye de t'aider

Comment animer une icône de menu de hamburger en CSS?


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.


Générez simplement des articles pour optimiser votre SEO
Générez simplement des articles pour optimiser votre SEO





DinoGeek propose des articles simples sur des technologies complexes

Vous souhaitez être cité dans cet article ? Rien de plus simple, contactez-nous à dino@eiki.fr

CSS | NodeJS | DNS | DMARC | MAPI | NNTP | htaccess | PHP | HTTPS | Drupal | WEB3 | LLM | Wordpress | TLD | Nom de Domaine | IMAP | TCP | NFT | MariaDB | FTP | Zigbee | NMAP | SNMP | SEO | E-Mail | LXC | HTTP | MangoDB | SFTP | RAG | SSH | HTML | ChatGPT API | OSPF | JavaScript | Docker | OpenVZ | ChatGPT | VPS | ZIMBRA | SPF | UDP | Joomla | IPV6 | BGP | Django | Reactjs | DKIM | VMWare | RSYNC | Python | TFTP | Webdav | FAAS | Apache | IPV4 | LDAP | POP3 | SMTP

| Whispers of love (API) | Déclaration d'Amour |






Mentions Légales / Conditions Générales d'Utilisation