CSS3 動畫導航是網站設計中常用的導航效果，它可以增強頁面的交互性和視覺效果，讓用戶更加方便地使用網站。下面我們來學習一下如何實現CSS3 動畫導航。

/* 導航樣式 */
nav{ 
height: 80px; 
width: 100%; 
background-color: #f44336; 
position: fixed; 
top: 0; 
z-index: 1; 
overflow: hidden; 
display: flex; 
justify-content: space-between; 
align-items: center; 
padding: 0 20px; 
} 
/* 導航標簽樣式 */
nav a{ 
text-decoration: none; 
font-size: 18px; 
color: #fff; 
margin: 0 10px; 
position: relative; 
} 
/* 鼠標懸停時導航標簽樣式 */
nav a:hover{ 
color: #333; 
cursor: pointer; 
} 
/* 選中導航標簽時樣式 */
.active{ 
color: #333; 
font-weight: bold; 
} 
/* 下劃線樣式 */
nav a:after{ 
content: ""; 
position: absolute; 
bottom: -6px; 
left: 0; 
width: 100%; 
height: 2px; 
background-color: #fff; 
transform: scaleX(0); 
transition: transform 0.3s ease; 
} 
/* 鼠標懸停時下劃線樣式 */
nav a:hover:after{ 
transform: scaleX(1); 
} 
/* 選中導航標簽時下劃線樣式 */
.active:after{ 
transform: scaleX(1); 
}

以上代碼中，nav元素定義了導航條的樣式，包括高度、背景顏色、定位、層數、溢出和對齊方式等。導航標簽則使用a元素，設置了文本裝飾、字體大小、顏色、邊距、定位和狀態等樣式。

為了實現下劃線動畫效果，我們使用了:after偽元素，其作用是在a元素內容之后插入新內容。通過設置position: absolute、bottom: -6px和left: 0，將下劃線放置在導航標簽文本的下方。為了實現動畫效果，我們使用了CSS3的transform屬性，將下劃線的寬度從0變為100%。同時，通過transition屬性，將下劃線的變化過程設置為0.3秒的緩動動畫。

最后，我們在對應的導航標簽添加.active類，可以實現選中導航標簽時下劃線的連續效果。

通過上述代碼的實現，我們可以輕易地創建一個簡單的CSS3動畫導航條，并提高網站的交互性和視覺效果，為用戶提供更好的訪問體驗。