请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

断天涯大虾
社区贡献组   /  发表于:2016-9-6 10:55  /   查看:5172  /  回复:0
本帖最后由 断天涯大虾 于 2016-9-8 09:51 编辑

想在自己的网站中应用超酷的hover效果吗?也许你可以从如下的这些实例中获得一些灵感,如果你喜欢这些效果,也可以直接拷贝代码并应用到你的站点。


给平淡的站点带来活力

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


向上跳跃

1.png

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

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

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

效果中的透明效果是并不是必须的,不设置透明属性并不影响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.   
  10. .ex1 img:hover {
  11.     margin-top: 2px;
  12. }
复制代码

查看Demo


层叠与放大

2.png

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

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

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

CSS代码

  1. /*Example 2*/
  2. #container {
  3.     width: 300px;
  4.     margin: 0 auto;
  5. }
  6.   
  7. #ex2 img{
  8.     height: 100px;
  9.     width: 300px;
  10.     margin: 15px 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.     height: 133px;
  18.     width: 400px;
  19.     margin-left: -50px;
  20. }
复制代码

查看Demo


文字淡入

3.png

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

CSS代码

  1. #ex3 {
  2.     width: 730px;
  3.     height: 133px;
  4.     line-height: 0px;
  5.     color: transparent;
  6.     font-size: 50px;
  7.     font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  8.        font-weight: 300;
  9.     text-transform: uppercase;
  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-height: 133px;
  17.     color: #575858;
  18. }
  19.   
  20. #ex3 img{
  21.     float: left;
  22.     margin: 0 15px;
  23. }
复制代码

查看Demo


旋转的图片

4.png

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

CSS代码

  1. #ex4 {
  2.     width: 800px;
  3.     margin: 0 auto;
  4. }
  5.   
  6. #ex4 img {
  7.     margin: 20px;
  8.     border: 5px 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


淡入和倒影

5.png

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

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

CSS代码

  1. #ex5 {
  2.     width: 700px;
  3.     margin: 0 auto;
  4.     min-height: 300px;
  5. }
  6.   
  7. #ex5 img {
  8.     margin: 25px;
  9.     opacity: 0.8;
  10.     border: 10px 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 top, left bottom, from(transparent), color-stop(.7, transparent), 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 top, left bottom, from(transparent), color-stop(.7, transparent), 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


前端工具用起来

前端开发渐成热潮,了解超酷的Hover效果之后,还需要了解开发工具:新一代HTML5 / JavaScript UI控件Wijmo,大而全面的前端开发工具包,为您的企业应用提供更加灵活的操作体验,现已全面支持Angular 2。


总结

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


编注

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

文章编译来源(5 Cool CSS Hover Effects You Can Copy and Paste


   
关于葡萄城:全球最大的控件提供商,世界领先的企业应用定制工具、企业报表和商业智能解决方案提供商,为超过75%的全球财富500强企业提供服务。

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部