5种超酷的Web页面中Hover效果(IE效果很差)

发表时间:2011-07-12 14:45:29

给平淡的站点带来活力

hover效果能给网页增加一些动态效果，并且使得站点更具有活力。原来的做法是使用javascript来实现这些动态效果，但是随着CSS3的引入和现代浏览器的支持，我们可以用纯粹的CSS代码来实现这些有趣的效果。所谓的现代浏览器，更多的是指以Mozilla和Webkit为核心的浏览器，IE的表现稍微差强人意，所以请使用FireFox，Safari或者Chrome查看一下的效果。如下就是要介绍的5个非常酷的纯CSS hover 效果。

向上跳跃


 
这种效果非常适合于当页面上有一横排图片的场景，当鼠标hover时就产生波浪一样的效果。

这个效果实现是非常简单的，并且有多种方法实现，如下的核心实现方法是：初始给所有图片设置mergin，当hover时，给相应的图片减少mergin的值，这样就实现了向上跳跃的效果。

这种效果不光可以应用于图片，一般的横向排列的导航栏也可以应用这样的效果。

效果中的透明效果是并不是必须的，不设置透明属性并不影响hover时的跳跃效果，加上透明只是为了让效果更平滑。

CSS代码：

  1. .ex1 img{  
  2.       border: 5px solid #ccc;  
  3.       float: left;  
  4.       margin: 15px;  
  5.       -webkit-transition: margin 0.5s ease-out;  
  6.       -moz-transition: margin 0.5s ease-out;  
  7.       -o-transition: margin 0.5s ease-out;  
  8. }       
  9. .ex1 img:hover {  
  10.       margin-top: 2px;    
  11. }  

查看Demo

层叠与放大



这种效果类似于熔岩灯效果，当鼠标从上至下移动时，每个图片都是慢慢地放大然后恢复到原始的状态。

为了实现这样的效果，首先把原始图片显示的时候缩小一点，当鼠标hover时，放大图片的尺寸。

因为图片是居中显示的，所以当鼠标hover时，也增加了图片的margin，这样使得当图片放大时也是居中的效果。

CSS代码

  1. /*Example 2*/   
  2. #container {  
  3.       width: 300px;  
  4.       margin: 0 auto;    
  5. }       
  6. #ex2 img{  
  7.       height: 100px;  
  8.       width: 300px;  
  9.       margin: 15px 0;  
  10.       -webkit-transition: all 1s ease;  
  11.       -moz-transition: all 1s ease;  
  12.       -o-transition: all 1s ease;    
  13. }       
  14. #ex2 img:hover {  
  15.       height: 133px;  
  16.       width: 400px;  
  17.       margin-left: -50px;    
  18. }   

查看Demo

------分割线---------------------------------------

您可能感兴趣

Tags: IE web hover效果

留个脚印

点击我更换图片 (请输入验证码)

最新评论