用css3建一個(gè)具有鼠標(biāo)懸停動(dòng)畫效果的導(dǎo)航菜單，當(dāng)鼠標(biāo)懸停在每個(gè)列表項(xiàng)上時(shí)，背景、圖標(biāo)和文本都會(huì)產(chǎn)生動(dòng)態(tài)變化，以增強(qiáng)用戶體驗(yàn)。
1.頁面結(jié)構(gòu)：
- 使用一個(gè)`<section>`標(biāo)簽作為整個(gè)導(dǎo)航菜單的容器，并為其添加`.business`和`.active`類。
- 在`<section>`內(nèi)部使用一個(gè)`<div>`標(biāo)簽作為內(nèi)容容器，添加`.box`類。
- 內(nèi)部包含一個(gè)無序列表`<ul>`，每個(gè)列表項(xiàng)`<li>`代表一個(gè)服務(wù)選項(xiàng)。
2.樣式：
- 使用CSS3的`transition`屬性為背景、圖標(biāo)和文本添加平滑的過渡效果。
- 利用`background-position`屬性改變背景圖的位置，實(shí)現(xiàn)懸停時(shí)的視覺變化。
- 使用`clip`屬性對(duì)某些元素進(jìn)行裁剪，以實(shí)現(xiàn)特定的動(dòng)畫效果。
3.交互：
- 當(dāng)鼠標(biāo)懸停在列表項(xiàng)上時(shí)，通過改變`background-position`和`clip`屬性，使背景圖和圖標(biāo)發(fā)生變化。
- 文本的顯示和隱藏通過改變`top`屬性和`transition-delay`屬性來實(shí)現(xiàn)。
重點(diǎn)方法
1. 基礎(chǔ)樣式重置：消除瀏覽器默認(rèn)的內(nèi)外邊距，確保所有元素在不同瀏覽器中表現(xiàn)一致。使用通配符選擇器``重置所有元素的內(nèi)外邊距，并移除鏈接的下劃線。
```css
{
padding: 0;
margin: 0;
}
a, a:hover {
text-decoration: none;
}
```
2. 導(dǎo)航欄基礎(chǔ)樣式：設(shè)置導(dǎo)航欄的寬度、居中顯示，并添加過渡效果。：使用`width`和`margin: 0 auto`使導(dǎo)航欄居中，`position: relative`確保子元素可以相對(duì)定位，`transition`屬性添加平滑過渡效果。
```css
.business .box {
width: 1200px;
margin: 0 auto;
position: relative;
transition: all .3s ease-in-out 0s;
}
```
3. 列表項(xiàng)樣式：設(shè)置列表項(xiàng)的尺寸、間距、背景圖和顯示方式。使用`width`和`height`設(shè)置尺寸，`margin`設(shè)置間距，`background`設(shè)置背景圖，`overflow: hidden`確保溢出內(nèi)容不可見，`display: inline-block`使列表項(xiàng)水平排列。
```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. 圖標(biāo)樣式：設(shè)置圖標(biāo)的尺寸、位置和顯示方式。使用`display: block`和`position: relative`使圖標(biāo)塊級(jí)顯示并可相對(duì)定位，`margin`設(shè)置居中和頂部間距，`height`設(shè)置高度
```css
.business .box ul.items li i {
display: block;
position: relative;
margin: 0 auto;
margin-top: 43px;
height: 69px;
}
```
5. 動(dòng)畫元素樣式：設(shè)置動(dòng)畫元素的尺寸、位置、背景圖和過渡效果。使用`display: block`和`position: absolute`使動(dòng)畫元素絕對(duì)定位，`width`和`height`設(shè)置尺寸，`margin-left`設(shè)置左側(cè)間距，`background`設(shè)置背景圖，`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ū)域：通過裁剪實(shí)現(xiàn)特定的動(dòng)畫效果。使用`clip`屬性定義裁剪區(qū)域，`.active`類改變裁剪區(qū)域的大小，實(shí)現(xiàn)動(dòng)畫效果。
```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. 文本樣式：設(shè)置標(biāo)題和描述文本的樣式。使用`display: block`和`text-align: center`使文本居中顯示，`font-size`和`line-height`設(shè)置字體大小和行高，`position: relative`和`top`設(shè)置垂直位置。
```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. 鼠標(biāo)懸停效果：當(dāng)鼠標(biāo)懸停在列表項(xiàng)上時(shí)，改變背景圖位置和圖標(biāo)樣式。使用`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. 特定類型圖標(biāo)的變化：當(dāng)鼠標(biāo)懸停在特定類型的列表項(xiàng)上時(shí)，改變圖標(biāo)背景圖的位置。使用`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. 文本顏色變化及延遲：當(dāng)鼠標(biāo)懸停在列表項(xiàng)上時(shí)，改變標(biāo)題文本的顏色，并添加延遲效果。使用`color`改變文本顏色，`transition-delay`屬性添加延遲效果。
```css
.business .box ul.items li:hover strong {
color: white;
transition-delay: .4s;
}
```
11. 描述文字的動(dòng)畫效果：當(dāng)鼠標(biāo)懸停在列表項(xiàng)上時(shí)，改變描述文本的垂直位置，并添加平滑過渡效果。使用`top`改變垂直位置，`transition`屬性添加平滑過渡效果，`transition-delay`屬性添加延遲效果。
```css
.business .box ul.items li:hover p {
top: 20px;
transition: all .3s ease-in-out .5s;
}
```
總結(jié)
通過上述方法，實(shí)現(xiàn)了鼠標(biāo)懸停時(shí)背景、圖標(biāo)和文本的動(dòng)態(tài)變化效果，增強(qiáng)了用戶的交互體驗(yàn)。主要利用了CSS3的`transition`、`background-position`和`clip`等屬性來實(shí)現(xiàn)這些效果。
