css实现网页动画制作创意导航

CSS可以实现各种网页动画效果，包括导航栏的创意动画。以下是一个简单的示例：

HTML代码：

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</nav>

CSS代码：

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

nav li {
  flex: 1;
  text-align: center;
}

nav a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #fff;
  background: #333;
  position: relative;
}

nav a:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 3px;
  background: #fff;
  transition: all 0.3s ease-in-out;
}

nav a:hover:before {
  width: 100%;
  left: 0;
}

这段CSS代码实现了一个简单的导航栏动画效果。当鼠标悬停在导航链接上时，链接下方会出现一个白色的线条，从中心向两侧展开。这个效果通过在链接前面添加一个伪元素，并在鼠标悬停时改变它的宽度和位置来实现。你可以在这个基础上进一步发挥创意，添加更多的动画效果，让你的网站导航栏更加吸引人。