Menu
CoddyTech
Mulai belajar

Animasi ikon saat diarahkan

Pelajaran 12 dari 12 dalam kursus Bilah Navigasi Bawah: Proyek HTML/CSS di Coddy.

Mari tambahkan efek transisi pada setiap ikon. Untuk itu, kita akan menggunakan selector CSS :hover:

challenge icon

Tantangan

Mudah

Untuk membuat efek hover pada ikon, kamu bisa menambahkan kode CSS berikut (kamu bisa menyesuaikan warnanya!):

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

Selesai! Bilah navigasi kini siap. Kamu bisa mengarahkan kursor ke ikon mana pun pada bilah navigasi untuk melihat efek transisi yang telah kamu tambahkan.

Selamat menulis kode!!

Coba sendiri

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Tulis kode HTML di sini -->
        <script src="script.js"></script>
    </body>
</html>

Semua pelajaran di Bilah Navigasi Bawah: Proyek HTML/CSS

1Bilah Navigasi

Menyiapkan Kodemain-containerPelajaran proyekBilah NavigasiPelajaran proyeklist tak berurutan dan judulPelajaran proyekItem dan judul listPelajaran proyekTambahkan IkonPelajaran proyek

2Gaya

Tag universalPelajaran proyekBodyPelajaran proyekPenataan navbarPelajaran proyekPenataan daftar tak berurutanPelajaran proyekPenataan item daftarPelajaran proyekAnimasi ikon saat diarahkanPelajaran proyek

Latihan sendiri: Playground Web