CSS3導航是網站開發中常用的一種效果，它可以讓網站的導航菜單變得更加美觀和有趣。現在讓我們一起來學習如何使用CSS3來制作一個漂亮的導航吧！

/*設置導航樣式*/
.nav{
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
align-items: center;
background: #333;
height: 50px;
}
/*設置導航鏈接樣式*/
.nav li a{
color: #fff;
text-decoration: none;
font-size: 18px;
margin: 0 10px;
position: relative;
line-height: 50px;
}
/*鼠標懸浮樣式*/
.nav li a:hover{
color: #07f;
transition: color 0.3s ease-out;
}
/*設置下劃線動畫樣式*/
.nav li a::before{
content: '';
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #07f;
opacity: 0;
transform: scaleX(0);
transition: all 0.3s ease-out;
}
/*鼠標懸浮下劃線動畫*/
.nav li a:hover::before{
opacity: 1;
transform: scaleX(1);
}

以上就是制作CSS3導航的基本代碼了。你只需要將上面的代碼粘貼到你的CSS文件里面，就可以完成一個漂亮的導航效果。當然，還需要結合HTML代碼，如下所示：

<ul class="nav"><li><a href="#">首頁</a></li><li><a href="#">關于我們</a></li><li><a href="#">服務</a></li><li><a href="#">聯系我們</a></li></ul>

這里我們只是簡單地給大家演示了一個制作CSS3導航的方法，而實際中可能還需要很多其他的樣式，這些都需要根據實際需求進行編寫。相信通過這篇教程，你已經能夠輕松制作出漂亮的CSS3導航啦！