5中超酷wev页面hover效果

转载 2012年03月22日 20:51:02

给平淡的站点带来活力

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

向上跳跃

image

这种效果非常适合于当页面上有一横排图片的场景,当鼠标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.    
  10. .ex1 img:hover {  
  11.     margin-top2px;  

查看Demo

层叠与放大

image

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

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

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

CSS代码

  1. /*Example 2*/ 
  2. #container {  
  3.     width300px;  
  4.     margin0 auto;  
  5. }  
  6.    
  7. #ex2 img{  
  8.     height100px;  
  9.     width300px;  
  10.     margin15px 0;  
  11.      -webkit-transition: all 1s ease;  
  12.     -moz-transition: all 1s ease;  
  13.     -o-transition: all 1s ease;  
  14. }  
  15.    
  16. #ex2 img:hover {  
  17.     height133px;  
  18.     width400px;  
  19.     margin-left-50px;  
  20. }  

查看Demo

文字淡入

image

类似的这种效果,一般是用JavaScript来实现的,当hover其中某个元素时,另一个元素发生一些变化。本例为了实现这一效果,首先把图片和文字放在一个div里,然后设置div的color:transparent和line-height:0px。当hover时,更改color和line-height属性,使得文字显示。

CSS代码

  1. #ex3 {  
  2.     width730px;  
  3.     height133px;  
  4.     line-height0px;  
  5.     colortransparent;  
  6.     font-size50px;  
  7.     font-family"HelveticaNeue-Light""Helvetica Neue Light""Helvetica Neue"HelveticaArialsans-serif;  
  8.        font-weight300;  
  9.     text-transformuppercase;  
  10.     -webkit-transition: all 0.5s ease;  
  11.     -moz-transition: all 0.5s ease;  
  12.     -o-transition: all 0.5s ease;  
  13. }  
  14.    
  15. #ex3:hover {  
  16.     line-height133px;  
  17.     color#575858;  
  18. }  
  19.    
  20. #ex3 img{  
  21.     floatleft;  
  22.     margin0 15px;  

查看Demo

旋转的图片

image

实现这个效果是非常容易的,但是因为这是一个非常重要的效果,尤其对于画廊中的缩略图。这个效果中我们使用了一些较新的CSS样式。这个例子使用了box-shadows,transitions和transforms。transform是实现旋转部分,transition是为了让效果更平滑。

CSS代码

  1. #ex4 {  
  2.     width800px;  
  3.     margin0 auto;  
  4. }  
  5.    
  6. #ex4 img {  
  7.     margin20px;  
  8.     border5px solid #eee;  
  9.     -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);  
  10.     -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);  
  11.     box-shadow: 4px 4px 4px rgba(0,0,0,0.2);  
  12.     -webkit-transition: all 0.5s ease-out;  
  13.     -moz-transition: all 0.5s ease;  
  14.     -o-transition: all 0.5s ease;  
  15. }  
  16.    
  17. #ex4 img:hover {  
  18.     -webkit-transform: rotate(-7deg);  
  19.     -moz-transform: rotate(-7deg);  
  20.     -o-transform: rotate(-7deg);  
  21. }  

查看Demo

淡入和倒影

image

这个效果是相对复杂的效果,首先,设置减少图片的初始的透明度,当hover时,把透明度设置回默认值,另外会有一个图片边缘发光的效果和倒影效果(只在以Webkit为内核的浏览器中起作用)。

如果你对倒影效果不太懂的话,可以参考这篇文章(Image Reflections with CSS)

CSS代码

  1. #ex5 {  
  2.     width700px;  
  3.     margin0 auto;  
  4.     min-height300px;  
  5. }  
  6.    
  7. #ex5 img {  
  8.     margin25px;  
  9.     opacity: 0.8;  
  10.     border10px solid #eee;  
  11.    
  12.     /*Transition*/ 
  13.     -webkit-transition: all 0.5s ease;  
  14.     -moz-transition: all 0.5s ease;  
  15.     -o-transition: all 0.5s ease;  
  16.    
  17.     /*Reflection*/ 
  18.     -webkit-box-reflect: below 0px -webkit-gradient(linear, left topleft bottom, from(transparent), color-stop(.7transparent), to(rgba(0,0,0,0.1)));  
  19. }  
  20.    
  21.    
  22. #ex5 img:hover {    
  23.    opacity: 1;  
  24.    
  25.    /*Reflection*/ 
  26.   -webkit-box-reflect: below 0px -webkit-gradient(linear, left topleft bottom, from(transparent), color-stop(.7transparent), to(rgba(0,0,0,0.4)));  
  27.    
  28.    /*Glow*/ 
  29.   -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);  
  30.   -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);  
  31.   box-shadow: 0px 0px 20px rgba(255,255,255,0.8);  
  32. }  

查看Demo

总结

经过测试,这些效果在以Webkit为核心的浏览器上表现最出色,Mozilla次之,IE最差,如果要使得在IE9中的效果更好,则需要其它的第三方JS库。以上的这五个纯CSS实现的hover效果,应该会给你带来一些设计上的灵感,你可以综合运用这些CSS样式,并加入一些其他的CSS来产生一些有意思的效果。如果你也有一些非常酷的CSS效果,欢迎参与讨论。

编注

以上的五种CSS Hover效果都应用了最新的CSS3效果,在现代的浏览器中,应用这些CSS能展现出非常漂亮的效果。值得一提的是IE9,IE9不支持transition和transform这两种效果,使得这五种效果在IE9下表现的不佳,寄希望于IE10吧。

原文链接:http://www.cnblogs.com/powertoolsteam/archive/2011/05/10/2042142.html

相关文章推荐

Web页面中5种超酷的Hover效果

想在自己的网站中应用超酷的hover效果吗?也许你可以从如下的这些实例中获得一些灵感,如果你喜欢这些效果,也可以直接拷贝代码并应用到你的站点。 给平淡的站点带来活力 hover效果能给网页增加一些动态...

超酷页面移动效果(媲美flash)

  • 2010年05月29日 10:19
  • 376KB
  • 下载

CSS3实现的超酷页面过渡效果

日期:2012/02/25  来源:GBin1.com 在线演示 本地下载 在过去的几年中,但页面的网站设计越来越多了,大多数都是使用javascript来实现过渡效果。那么今天我们讲介绍使用...
  • jjfat
  • jjfat
  • 2012年02月28日 17:39
  • 726

如何使用SVG生成超酷的页面预加载素描动画效果

可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。...
  • jjfat
  • jjfat
  • 2014年10月22日 15:42
  • 1022

使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果

日期:2011/11/01 来源:GBin1.com 因为本人是星际争霸系列游戏的忠实拥簇,所以在今天的jQuery教程中,我们将使用HTML5和jQuery插件Quicksand来创建一个超酷...
  • jjfat
  • jjfat
  • 2011年11月01日 19:08
  • 896

使用HTML5和jQuery插件Reel实现一个超酷的星际争霸2兵种动画360度预览效果

今天继续给大家介绍HTML5和jQuery插件结合使用生成的图形特效,这里我继续使用星际争霸2的图片元素给大家介绍一个360度全景预览兵种的特效实现,希望大家喜欢!请大家多多留言! 在线演示  ...
  • jjfat
  • jjfat
  • 2011年11月07日 20:22
  • 1157

分享一个HTML5画布实现的超酷文字弹跳球效果

日期:2012/03/05  来源:GBin1.com 在线演示  本地下载 今天我们分享一个来自于html5canvastutorials的超酷弹跳球效果,这里我们使用纯HTML...
  • jjfat
  • jjfat
  • 2012年03月07日 18:00
  • 588

用HTML5创建超酷图像灰度渐变效果

原文:http://www.webdesignerwall.com/tutorials/html5-grayscale-image-hover/       曾几何时,网站上显示的灰度图像必须手动...

超酷的幻灯片过渡效果(jQuery)

随着HTML5和CSS3的发展,越来越多的网站使用jQuery,CSS3和HTML5的组合来构建漂亮的幻灯效果。今天、介绍几款超酷的幻灯片过渡效果(jQuery插件)给大家,它们都可以变幻出多种过渡效...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:5中超酷wev页面hover效果
举报原因:
原因补充:

(最多只允许输入30个字)