悬停时的图标动画

Coddy 底部导航栏：HTML/CSS 项目课程的第 12 课，共 12 课。

让我们为每个图标添加过渡效果。为此，我们将使用 :hover CSS 选择器：

挑战

简单

要为图标创建悬停效果，你可以添加以下 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>
        <!-- 在这里编写 HTML 代码 -->
        <script src="script.js"></script>
    </body>
</html>

底部导航栏：HTML/CSS 项目中的所有课

1导航栏

2样式

悬停时的图标动画

自己练习： Web 在线编辑器