IXWebHosting

本文转载自[主机网] 原文地址：http://www.host.org.cn/css%E7%89%B9%E6%95%88%E8%8F%9C%E5%8D%95%E4%B9%8B%E6%BB%91%E5%8A%A8%E5%9B%BE%E7%89%87.html

今天在网上看到一个特效菜单，效果不错。认真看了源码然后略微修改了一下，自我感觉还不错，简单写个代码分析，分享给大家。

整个菜单用一个UL，每个菜单项就是一个列表项LI，单个菜单项包含两个说明（SPAN）和一个图像（IMAGE）。

设置菜单项 .mh-menu li 为Block同时设置一个背景rgba(255,255,255, 0.8)。当鼠标移动到上面的时候改变背景为rgba(225,239,240, 0.4)

1:  .mh-menu li:hover a{  

2:      background: rgba(225,239,240, 0.4);  

3:  }

对于描述文字，当鼠标停留的时候也改变其颜色，但是颜色可以是不一样，当然颜色过渡动画时间也可以不一样：

1:  .mh-menu li a span:nth-child(2){  

2:      /*...*/  

3:      transition: color 0.2s linear;  

4:  }  

5:  .mh-menu li:nth-child(1):hover span:nth-child(2){  

6:      color: #ae3637;  

7:  }  

8:  .mh-menu li:nth-child(2):hover span:nth-child(2){  

9:      color: #c3d243; 

10:  } 

11:  .mh-menu li:nth-child(3):hover span:nth-child(2){ 

12:      color: #d38439; 

13:  } 

14:  .mh-menu li:nth-child(4):hover span:nth-child(2){ 

15:      color: #8e7463; 

16:  }

对于图片，我们让其从左到右出现，同时我们设置他的透明度从0到1，这样有一个逐渐出现的动画。

1:  .mh-menu li img{  

2:      position: absolute;  

3:      z-index: 1;  

4:      left: 0px;  

5:      top: 0px;  

6:      opacity: 0;  

7:      transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;  

8:  }  

9:  .mh-menu li:hover img{ 

10:      left: 300px; 

11:      opacity: 1; 

12:  }

就这么简单，我们可以完成一个不错的效果。

我做了一个演示（包含源码打包下载）：http://demo.host.org.cn/?id=css_slice_memu