在一個網站的設計中，導航欄是一個不可或缺的組成部分。為了使導航欄更加生動有趣，我們可以使用CSS動畫來設置它。 首先，我們需要設置一個nav標簽，并添加一個ul標簽，ul標簽中包含li標簽。通過CSS選擇器我們可以為導航欄添加樣式。這里我們使用border-bottom屬性來為導航欄添加底部邊框。

nav { 
border-bottom: 2px solid #ccc; 
}
nav ul { 
padding: 0; 
margin: 0; 
list-style-type: none; 
}
nav li { 
float: left; 
position: relative; 
}
nav a { 
display: block; 
padding: 15px 20px; 
font-weight: bold; 
text-decoration: none; 
color: #333; 
}
nav a:hover { 
background-color: #333; 
color: #fff; 
}

接著，我們可以為導航欄添加一個效果，例如當鼠標移到li標簽上時，我們可以使它的底部邊框變色。

nav li:hover { 
border-bottom: 2px solid #333; 
}

如果想要更加生動有趣的效果，我們可以添加CSS動畫。例如，在鼠標移到li標簽上時，我們可以讓它的底部邊框漸變變色。這里我們使用transition屬性來實現CSS動畫效果。

nav li { 
transition: border-color 0.3s ease-in-out; 
}
nav li:hover { 
border-bottom: 2px solid rgba(0, 0, 0, 0.8); 
}

通過這些簡單的CSS樣式和動畫，我們可以使導航欄更加生動有趣，為網站的設計增色不少。