找回密码
 立即注册

QQ登录

只需一步，快速开始

首页 › 技术交流区 › 前端技术交流 › 查看内容
发新帖

断天涯大虾

社区贡献组

269

主题

272

帖子

1655

积分

社区贡献组

积分
1655

微信认证勋章

最新发帖

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

断天涯大虾
社区贡献组   /  发表于：2016-9-6 10:55  /   查看：5211  /  回复：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 个回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
产品与服务
活字格低代码平台
Wyn 商业智能软件
SpreadJS纯前端表格控件
技术服务体系
技术博客
低代码技术
客户与案例
典型客户
成功案例
用户访谈
合作与生态
合作伙伴网络
葡萄城市场
葡萄城与国产化
活字格用友客开工具
品牌活动
葡萄城公开课
品牌战略发布会
赋能开发者高峰论坛
企业级低代码发展研讨会
企业级低代码应用大赛
表格技术研讨会
了解葡萄城
葡萄城简介
愿景使命
研发与创新
荣誉奖项
加入我们
联系方式
联系我们
400-657-6008

葡萄城社区二维码

关注“葡萄城社区”

赋能开发者

西安葡萄城软件有限公司
专业的软件开发技术和低代码平台提供商

陕ICP备2020018819号  |   陕公网安备：61019002000258  |   隐私政策  |   网站地图  

邮箱： info.xa@grapecity.com  |  © 2024 葡萄城软件，保留所有权利

Archiver| 手机版| 小黑屋|

返回顶部