Animation d'icône au survol

Leçon 12 sur 12 du cours Barre de navigation inférieure - Projet HTML/CSS de Coddy.

Ajoutons l'effet de transition sur chaque icône. Pour cela, nous utiliserons le sélecteur CSS :hover :

Défi

Facile

Pour créer un effet de survol sur une icône, vous pouvez ajouter le code CSS suivant (vous pouvez ajuster les couleurs !) :

.navigation ul li:hover {
    color: purple;
    transform: scale(1.2);
    background-color: #fff;
    border-radius: 50%;
}

Et voilà ! La barre de navigation est maintenant prête. Vous pouvez survoler n'importe quelle icône de la barre de navigation pour voir l'effet de transition que vous avez ajouté.

Bon codage !!

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>