CSS3 左側導航 在網頁設計中，導航欄是非常重要的一個部分。其中左側導航常常用于展示網站的分類信息或者菜單欄目等。通過 CSS3 技術的運用，可以制作出美觀且交互性好的左側導航。 下面是一個簡單的左側導航的示例： `````` 其中，`nav` 標簽表示導航欄，`ul` 標簽表示無序列表，`li` 標簽表示列表項，`a` 標簽表示鏈接。 我們可以使用 CSS3 的偽元素技術，通過設置 `:hover` 樣式實現鼠標懸停時的效果。例如，我們可以設置列表項的背景顏色和字體顏色： ``` nav ul li:hover { background-color: #f8f8f8; } nav ul li:hover a { color: #444; } ``` 另外，我們也可以使用 CSS3 的過渡效果，讓左側導航更加流暢和自然。例如，我們可以設置列表項的寬度和左邊距，以及過渡的屬性和時長： ``` nav ul li { width: 200px; margin-left: -200px; transition: all 0.3s ease; } nav ul li:hover { margin-left: 0; } ``` 這樣，當鼠標懸停在列表項上時，它會從左側滑出，并且列表項的寬度也會發生改變。 最后，我們也可以使用 CSS3 的動畫效果，增加左側導航的互動性和吸引力。例如，我們可以設置圖標旋轉、縮放等效果： ``` nav ul li >a:before { content: "\f105"; font-family: FontAwesome; font-size: 16px; color: #aaa; display: inline-block; margin-right: 10px; transition: all 0.3s ease; } nav ul li:hover >a:before { transform: rotate(360deg); transform-origin: center; color: #f00; } ``` 這樣，當鼠標懸停在鏈接上時，圖標會旋轉并且顏色會變成紅色。 通過使用 CSS3 技術，我們可以使左側導航更加美觀和交互性，為用戶提供更好的用戶體驗。