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.       border5px solid #ccc;  
  3.       floatleft;  
  4.       margin15px;  
  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-top2px;    
  11. }  

查看Demo

层叠与放大



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

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

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

CSS代码

  1. /*Example 2*/   
  2. #container {  
  3.       width300px;  
  4.       margin0 auto;    
  5. }       
  6. #ex2 img{  
  7.       height100px;  
  8.       width300px;  
  9.       margin15px 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.       height133px;  
  16.       width400px;  
  17.       margin-left-50px;    
  18. }   

查看Demo

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

Tags: IE web hover效果

留个脚印

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

最新评论