アイコンのホバーアニメーション
Coddyの「ボトムナビゲーションバー - HTML/CSSプロジェクト」コースのレッスン 12/12。
各アイコンにトランジション効果を追加しましょう。そのために、:hover CSSセレクターを使用します：
チャレンジ
簡単アイコンにホバー効果を作成するには、次のCSSコードを追加します（色は自由に調整できます！）：
.navigation ul li:hover {
color: purple;
transform: scale(1.2);
background-color: #fff;
border-radius: 50%;
}これで準備完了です！ナビゲーションバーが完成しました。ナビゲーションバーの任意のアイコンにマウスを合わせると、追加したトランジション効果を確認できます。
Happy Coding !!
自分で試してみよう
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
<script src="script.js"></script>
</body>
</html>