如何使用HTML和CSS实现带有动画效果的导航栏？

翻滚的胖子
2023-07-26 11:05:59
前端技术
CSS JavaScript

在本篇教程中，我们将学习如何使用HTML和CSS来创建一个带有动画效果的导航栏。

首先，我们需要创建一个HTML文件，并在其中添加导航栏的基本结构。以下是一个简单的示例：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

以上代码创建了一个包含四个导航选项的无序列表。我们将使用CSS来为导航栏添加样式和动画效果。

接下来，我们需要添加CSS样式来美化导航栏。以下是一个示例：

nav {
  background-color: #f1f1f1;
}
 
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}
 
nav ul li {
  display: inline;
}
 
nav ul li a {
  text-decoration: none;
  padding: 10px;
  color: #333;
  transition: color 0.3s ease-in-out;
}
 
nav ul li a:hover {
  color: #ff0000;
}