Web页面中5种超酷的Hover效果分享
77 浏览量
2020-09-25
10:49:17
上传
评论
收藏 237KB PDF 举报
Web页面中页面中5种超酷的种超酷的Hover效果分享效果分享
想在自己的网站中应用超酷的hover效果吗？也许你可以从如下的这些实例中获得一些灵感，如果你喜欢这些效
果，也可以直接拷贝代码并应用到你的站点
给平淡的站点带来活力
hover效果能给网页增加一些动态效果，并且使得站点更具有活力。原来的做法是使用javascript来实现这些动态效果，但是随
着CSS3的引入和现代浏览器的支持，我们可以用纯粹的CSS代码来实现这些有趣的效果。所谓的现代浏览器，更多的是指以
Mozilla和Webkit为核心的浏览器，IE的表现稍微差强人意，所以请使用FireFox，Safari或者Chrome查看一下的效果。如下就
是要介绍的5个非常酷的纯CSS hover 效果。
向上跳跃
这种效果非常适合于当页面上有一横排图片的场景，当鼠标hover时就产生波浪一样的效果。
这个效果实现是非常简单的，并且有多种方法实现，如下的核心实现方法是：初始给所有图片设置mergin，当hover时，给相
应的图片减少mergin的值，这样就实现了向上跳跃的效果。
这种效果不光可以应用于图片，一般的横向排列的导航栏也可以应用这样的效果。
效果中的透明效果是并不是必须的，不设置透明属性并不影响hover时的跳跃效果，加上透明只是为了让效果更平滑。
CSS代码：
复制代码
代码如下:
.ex1 img{
border: 5px solid #ccc;
float: left;
mergin: 15px;
-webkit-transition: mergin 0.5s ease-out;
-moz-transition: mergin 0.5s ease-out;
-o-transition: mergin 0.5s ease-out;
}
.ex1 img:hover {
mergin-top: 2px;
}
查看Demo
层叠与放大
这种效果类似于熔岩灯效果，当鼠标从上至下移动时，每个图片都是慢慢地放大然后恢复到原始的状态。
为了实现这样的效果，首先把原始图片显示的时候缩小一点，当鼠标hover时，放大图片的尺寸。
因为图片是居中显示的，所以当鼠标hover时，也增加了图片的mergin，这样使得当图片放大时也是居中的效果。
CSS代码
评论0
最新资源