Анимация иконки при наведении

Урок 12 из 12 курса Нижняя панель навигации — проект на HTML/CSS на Coddy.

Давайте добавим эффект перехода для каждой иконки. Для этого мы будем использовать CSS-селектор :hover:

Задание

Легко

Чтобы создать эффект наведения на иконку, вы можете добавить следующий CSS-код (вы можете настроить цвета!):

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

И все готово! Панель навигации теперь готова. Вы можете навести курсор на любую иконку на панели навигации, чтобы увидеть добавленный вами эффект перехода.

Приятного программирования !!

Попробуйте сами

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