Animazione dell'icona al passaggio del mouse

Lezione 12 di 12 del corso Barra di navigazione inferiore - Progetto HTML/CSS di Coddy.

Aggiungiamo l'effetto di transizione su ciascuna icona. Per farlo, useremo il selettore CSS :hover:

Sfida

Facile

Per creare un effetto al passaggio del mouse su un'icona, puoi aggiungere il seguente codice CSS (puoi modificare i colori!):

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

E abbiamo finito! La barra di navigazione è pronta. Puoi passare il mouse su qualsiasi icona della barra di navigazione per vedere l'effetto di transizione che hai aggiunto.

Buona programmazione!!

Provalo tu

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Scrivi qui il codice HTML -->
        <script src="script.js"></script>
    </body>
</html>