CSS3中使用transition特性实现的简单动画菜单

transition是css3中新添加的特性，在W3C标准中是这样描述 的：“css的transition允许css的属性值在一定的时间内从 一个状态平滑的过渡到另一个状态。这种状态可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并平滑的以动画效果改变css的属性值。”有了transition一切动画都变得如此简单。

在今天的小贴士,我们将向您展示如何让你的菜单添加一个整洁的悬浮效果。

1、

XML/HTML代码

1. <ul class="mh-menu">  
2.     <li>  
3.         <a href="#">  
4.             <span>Art Director</span>  
5.             <span>Henry James</span>  
6.         </a>  
7.         <img src="images/1.jpg" alt="image01"/>  
8.     </li>  
9.     <!– … –>  
10. </ul>  

2、鼠标hover增加颜色

CSS代码

1. .mh-menu li:hover a{  
2.     background: rgba(225,239,240, 0.4);  
3. }  

3、第二个span设置不同的颜色（其实这不是最主要的）

CSS代码

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. }  

4、重要的来了就是设置图片的属性left 从0过度到300，透明度从0变到1

CSS代码

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. }  

最后滑出来的效果，可以根据自己洗好改变多种css的属性，来实现需要的效果。