在过去的 Web 开发时代，开发人员在需要为其网站制作任何类型的动画时都会依赖 Adob​​e 的 Flash。随着时间的推移，人们放弃了 Flash，开始借助 CSS 和 JavaScript 来完成许多这样的事情。最后，借助 CSS3 及其现在所享有的广泛浏览器支持，我们只需使用一些 CSS3 而无需其他任何东西，就可以做一些非常令人惊奇的事情。

在本教程中，我将向您展示如何使用 CSS3 创建一个很酷的动画导航菜单。您可以在下面的 CodePen 演示中看到它的实际效果：

对实施菜单感到兴奋吗？让我们开始吧。

决定标记

HTML5 引入了许多新标签和功能。这意味着我们不再需要使用 div 元素来包装我们想要设置样式的所有内容。我们的标记现在可以更加明智和语义化。

让我们从网站的标题部分开始。我们将其包装在 header 元素内，如下所示。

<header>
  <div class="top-wrapper">
  </div>
  
  <nav>
    <ul>
      <li><a href="#">home</a></li>
      <li><a href="#">about</a></li>
      <li><a href="#">services</a></li>
      <li><a href="#">solutions</a></li>
      <li><a href="#">contact</a></li>
    </ul>
  </nav>
</header>

本文地址：http://yunji1.cn