用css3建一个具有鼠标悬停动画效果的导航菜单，当鼠标悬停在每个列表项上时，背景、图标和文本都会产生动态变化，以增强用户体验。
1.页面结构：
- 使用一个`<section>`标签作为整个导航菜单的容器，并为其添加`.business`和`.active`类。
- 在`<section>`内部使用一个`<div>`标签作为内容容器，添加`.box`类。
- 内部包含一个无序列表`<ul>`，每个列表项`<li>`代表一个服务选项。
2.样式：
- 使用CSS3的`transition`属性为背景、图标和文本添加平滑的过渡效果。
- 利用`background-position`属性改变背景图的位置，实现悬停时的视觉变化。
- 使用`clip`属性对某些元素进行裁剪，以实现特定的动画效果。
3.交互：
- 当鼠标悬停在列表项上时，通过改变`background-position`和`clip`属性，使背景图和图标发生变化。
- 文本的显示和隐藏通过改变`top`属性和`transition-delay`属性来实现。
重点方法
1. 基础样式重置：消除浏览器默认的内外边距，确保所有元素在不同浏览器中表现一致。使用通配符选择器``重置所有元素的内外边距，并移除链接的下划线。
```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. 裁剪区域：通过裁剪实现特定的动画效果。使用`clip`属性定义裁剪区域，`.active`类改变裁剪区域的大小，实现动画效果。
```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`伪类触发悬停效果。
```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`伪类触发悬停效果。
```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;
}
```
总结
通过上述方法，实现了鼠标悬停时背景、图标和文本的动态变化效果，增强了用户的交互体验。主要利用了CSS3的`transition`、`background-position`和`clip`等属性来实现这些效果。
