用css3实现鼠标移入在原来的层上面显示另一个层的动画效果

演示效果

      这是当鼠标移入会在原来的层上显示另一个层的动画，我这个页面里有很多项都需要用这个效果，之前我想用js来实现这个效果，不过弹出来的层的位置不好固定，特别是页面里有太多这个效果，而最麻烦的还是当窗口缩小时弹出的层会乱飘，后来我使用css3动画来实现，不仅在切换间很流畅有一些酷炫的动画效果，而且代码很简洁。

   1. 首先在一个.container-detailed的盒子里建两个盒子，这两个盒子就是用来切换显示和隐藏的。

    

        
    
    

        
某某某   |   安卓开发
        
爱好：骑骑单车，打打游戏
        
联系方式：
    

2.为这两个盒子绑定动画

3.为.container-detailed使用hover事件，用纯css3控制显示

贴入完整代码：

	
	
	
   
   




	

		
	
	

		
某某某   |   安卓开发
		
爱好：骑骑单车，打打游戏
		
联系方式：
	

这个动画效果也很棒，当然你也可以修改成自己想要的动画。