transition配和css3如何做导航？
transition是css3中的过渡属性，使用它可以完成一些简单的过渡动画，比如宽度从100渐变到200。下面我们介绍下如何使用transition配和css3来实现一个导航。
1、首先创建基本的导航结构
<nav>
<ul>
<li>
<a href="#">主页</a>
</li>
<li>
<a href="#">HTML</a>
</li>
<li>
<a href="#">CSS</a>
</li>
<li>
<a href="#">JavaScript</a>
</li>
</ul>
</nav>
2、然后写上基本的样式，来美化导航栏
<style>
ul{
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
li > a{
display: inline-block;
text-decoration: none;
padding: 4px 8px;
background: #eee;
}
</style>
3、之后为a标签添加:hover伪类选择器
li > a:hover{
background: orange;
border-bottom: 2px solid red;
}
4、最后结合我们的transition属性，让导航更具有动态效果
li > a{
transition: all .3s;
}
相关推荐：
更多CSS3相关技术文章，请访问CSS3答疑栏目进行学习！
以上就是transition配和css3如何做导航？的详细内容，更多请关注易知道|edz.cc其它相关文章！
