前端学习——纯CSS实现动态翻转导航条

纯CSS实现动态翻转导航条

在学习动画的时候，一开始不知道写一个生命东西来进行学习，后来在网上看到了一些CSS实现的动画效果，觉得很酷炫，就在其中选了导航条来进行学习，导航条比较基础而且用的比较多，以后的学习也基本采用这种基础且广泛的进行学习。我也是学习的，所以这些效果也不是原创的。话不多说，直接开始。

HTML方面：

HTML方面比较简单，只需要一个nav，ul和若干li，a，p标签即可。

<nav class="nav">
    <ul>
      <li> <a href="#"><p>首页</p><p>Home</p></a></li>
      <li> <a href="#"><p>首页</p><p>Home</p></a></li>
      <li> <a href="#"><p>首页</p><p>Home</p></a></li>
      <li> <a href="#"><p>首页</p><p>Home</p></a></li>
      <li> <a href="#"><p>首页</p><p>Home</p></a></li>
    </ul>

CSS方面：

首先肯定是先设置最外层的nav的样式。

.nav {
   
	    width:722px;
	    margin:50px auto;