隨著移動設備的普及，開發人員在設計網站時必須考慮到移動設備上的用戶體驗。其中，移動端導航欄的設計是必不可少的一部分。在CSS3中，我們可以使用一些新的屬性和技巧來實現更加優雅和靈活的導航欄。

/* 設置導航欄樣式 */
nav {
background-color: #333;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px;
}
/* 設置導航欄鏈接樣式 */
nav a {
color: #fff;
font-weight: bold;
text-decoration: none;
}
/* 設置導航欄圖標樣式 */
nav i {
font-size: 24px;
color: #fff;
}
/* 設置導航欄菜單 */
.menu {
position: absolute;
top: 50px;
right: 0;
width: 100%;
background-color: #333;
z-index: 1;
display: none;
}
/* 設置導航欄菜單鏈接 */
.menu a {
display: block;
color: #fff;
font-weight: bold;
padding: 10px;
text-align: center;
}
/* 設置導航欄菜單出現動畫效果 */
.menu.show {
display: block;
animation-name: slideInDown;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
/* 定義導航欄菜單出現動畫 */
@keyframes slideInDown {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}

在以上代碼中，我們首先為導航欄設置了一些基本樣式，如背景色、高度、對齊方式和內邊距等。然后通過設置絕對定位和隱藏樣式，隱藏了導航欄菜單。最后，定義了一個菜單出現動畫，使導航欄菜單從上方滑入。

通過以上代碼，我們可以輕松地創建一個簡單而漂亮的移動端導航欄。此外，我們還可以利用CSS3的媒體查詢來動態修改導航欄的樣式，以適應不同的設備尺寸和方向。