İkon üzerinde hover animasyonu

Coddy'nin Alt Gezinti Çubuğu - HTML/CSS Projesi kursunda ders 12 / 12.

Her bir simgeye geçiş efekti ekleyelim. Bunun için :hover CSS seçicisini kullanacağız:

Görev

Kolay

Bir simge üzerinde gezinme (hover) efekti oluşturmak için aşağıdaki CSS kodunu ekleyebilirsiniz (renkleri ayarlayabilirsiniz!):

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

Ve her şey hazır! Navigasyon çubuğu artık hazır. Eklediğiniz geçiş efektini görmek için navigasyon çubuğundaki herhangi bir simgenin üzerine gelebilirsiniz.

Happy Coding !!

Kendin dene

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