用css3建一個具有鼠標懸停動畫效果的導航菜單，當鼠標懸停在每個列表項上時，背景、圖標和文本都會產生動態(tài)變化，以增強用戶體驗。
1.頁面結構：
- 使用一個`<section>`標簽作為整個導航菜單的容器，并為其添加`.business`和`.active`類。
- 在`<section>`內部使用一個`<div>`標簽作為內容容器，添加`.box`類。
- 內部包含一個無序列表`<ul>`，每個列表項`<li>`代表一個服務選項。
2.樣式：
- 使用CSS3的`transition`屬性為背景、圖標和文本添加平滑的過渡效果。
- 利用`background-position`屬性改變背景圖的位置，實現(xiàn)懸停時的視覺變化。
- 使用`clip`屬性對某些元素進行裁剪，以實現(xiàn)特定的動畫效果。
3.交互：
- 當鼠標懸停在列表項上時，通過改變`background-position`和`clip`屬性，使背景圖和圖標發(fā)生變化。
- 文本的顯示和隱藏通過改變`top`屬性和`transition-delay`屬性來實現(xiàn)。
重點方法
1. 基礎樣式重置：消除瀏覽器默認的內外邊距，確保所有元素在不同瀏覽器中表現(xiàn)一致。使用通配符選擇器``重置所有元素的內外邊距，并移除鏈接的下劃線。
```css
{
padding: 0;
margin: 0;
}
a, a:hover {
text-decoration: none;
}
```
2. 導航欄基礎樣式：設置導航欄的寬度、居中顯示，并添加過渡效果。：使用`width`和`margin: 0 auto`使導航欄居中，`position: relative`確保子元素可以相對定位，`transition`屬性添加平滑過渡效果。
```css
.business .box {
width: 1200px;
margin: 0 auto;
position: relative;
transition: all .3s ease-in-out 0s;
}
```
3. 列表項樣式：設置列表項的尺寸、間距、背景圖和顯示方式。使用`width`和`height`設置尺寸，`margin`設置間距，`background`設置背景圖，`overflow: hidden`確保溢出內容不可見，`display: inline-block`使列表項水平排列。
```css
.business .box ul.items li {
width: 200px;
height: 300px;
margin: 0 8px;
background: url(../images/bg_green.png) no-repeat 0px 400px;
overflow: hidden;
display: inline-block;
}
```
4. 圖標樣式：設置圖標的尺寸、位置和顯示方式。使用`display: block`和`position: relative`使圖標塊級顯示并可相對定位，`margin`設置居中和頂部間距，`height`設置高度
```css
.business .box ul.items li i {
display: block;
position: relative;
margin: 0 auto;
margin-top: 43px;
height: 69px;
}
```
5. 動畫元素樣式：設置動畫元素的尺寸、位置、背景圖和過渡效果。使用`display: block`和`position: absolute`使動畫元素絕對定位，`width`和`height`設置尺寸，`margin-left`設置左側間距，`background`設置背景圖，`transition`屬性添加平滑過渡效果。
```css
.business .box ul.items li u {
display: block;
position: absolute;
width: 156px;
height: 156px;
margin-left: 22px;
background: url(../images/words.png) no-repeat 0px -363px;
transition: all .5s ease-in-out 0s;
}
```
6. 裁剪區(qū)域：通過裁剪實現(xiàn)特定的動畫效果。使用`clip`屬性定義裁剪區(qū)域，`.active`類改變裁剪區(qū)域的大小，實現(xiàn)動畫效果。
```css
.business .box ul.items li u.cl { clip: rect(0px,156px,-10px,78px); }
.business.active .box ul.items li u.cl { clip: rect(0px,156px,156px,78px); }
.business .box ul.items li u.cr { clip: rect(156px,78px,156px,0px); }
.business.active .box ul.items li u.cr { clip: rect(0px,78px,156px,0px); }
```
7. 文本樣式：設置標題和描述文本的樣式。使用`display: block`和`text-align: center`使文本居中顯示，`font-size`和`line-height`設置字體大小和行高，`position: relative`和`top`設置垂直位置。
```css
.business .box ul.items li strong {
display: block;
margin-top: 70px;
font-size: 16px;
font-weight: normal;
text-align: center;
}
.business .box ul.items li p {
position: relative;
top: 200px;
color: white;
font-family: Arial, "宋體";
font-size: 12px;
line-height: 20px;
text-align: center;
}
```
8. 鼠標懸停效果：當鼠標懸停在列表項上時，改變背景圖位置和圖標樣式。使用`background-position`改變背景圖位置，`transition`屬性添加平滑過渡效果，`hover`偽類觸發(fā)懸停效果。
```css
.business .box ul.items li:hover {
background-position: 0px 0px;
transition: all .5s ease-in-out .3s;
}
.business .box ul.items li:hover i {
transition: all .5s ease-in-out .4s;
}
```
9. 特定類型圖標的變化：當鼠標懸停在特定類型的列表項上時，改變圖標背景圖的位置。使用`background-position`改變背景圖位置，`hover`偽類觸發(fā)懸停效果。
```css
.business .box ul.items li.pc:hover i { background-position: -168px -357px; }
.business .box ul.items li.mobi:hover i { background-position: -337px -291px; }
.business .box ul.items li.sys:hover i { background-position: -327px -362px; }
.business .box ul.items li.app:hover i { background-position: -164px -439px; }
.business .box ul.items li.host:hover i { background-position: -335px -439px; }
```
10. 文本顏色變化及延遲：當鼠標懸停在列表項上時，改變標題文本的顏色，并添加延遲效果。使用`color`改變文本顏色，`transition-delay`屬性添加延遲效果。
```css
.business .box ul.items li:hover strong {
color: white;
transition-delay: .4s;
}
```
11. 描述文字的動畫效果：當鼠標懸停在列表項上時，改變描述文本的垂直位置，并添加平滑過渡效果。使用`top`改變垂直位置，`transition`屬性添加平滑過渡效果，`transition-delay`屬性添加延遲效果。
```css
.business .box ul.items li:hover p {
top: 20px;
transition: all .3s ease-in-out .5s;
}
```
總結
通過上述方法，實現(xiàn)了鼠標懸停時背景、圖標和文本的動態(tài)變化效果，增強了用戶的交互體驗。主要利用了CSS3的`transition`、`background-position`和`clip`等屬性來實現(xiàn)這些效果。
