纯CSS3实现鼠标放在图片显示文字动画效果

网站建设 提交于 2016-11-15 23:32:12

网页效果中经常会用到当鼠标移到图片上自动以动画形式切换显示另一张图片或文字,这种效果称为图片hover效果,实现这个效果的方法有多种可以用JQ还可以用CSS3,从SEO角度说显然用CSS3实现更好,ImageHover.css 这个库为我们提供了多种的效果。

效果显示地址: https://www.tuhongwei.com/static/demo/196

github 地址 https://github.com/ciar4n/imagehover.css

imagehover.css官方下载地址:http://imagehover.io

使用方法:

在页面头部即<head></head>中引入imagehover.css或imagehover.min.css文件。

<link type="text/css" rel="stylesheet" href="css/imagehover.min.css" />或

<link type="text/css" rel="stylesheet" href="css/imagehover.css" />

在页面中使用下面的HTML结构,图片的src指向你需要的图片地址,Hover Content是鼠标滑过时显示的内容,可以自定义。在<figure>元素中,class可设置需要的鼠标滑过图片效果。

<figure class="imghvr-fade">
    <img src="#">
    <figcaption>
      // Hover Content
    </figcaption>
    <a href="http://www.tuhongwei.com"></a>
</figure>

imagehover.css可用的鼠标滑过图片效果的class类有:

imghvr-fade
imghvr-push-up
imghvr-push-down
imghvr-push-left
imghvr-push-right
imghvr-slide-up
imghvr-slide-down
imghvr-slide-left
imghvr-slide-right
imghvr-reveal-up
imghvr-reveal-down
imghvr-reveal-left
imghvr-reveal-right
imghvr-hinge-up
imghvr-hinge-down
imghvr-hinge-left
imghvr-hinge-right
imghvr-flip-horiz
imghvr-flip-vert
imghvr-flip-diag-1
imghvr-flip-diag-2
imghvr-shutter-out-horiz
imghvr-shutter-out-vert
imghvr-shutter-out-diag-1
imghvr-shutter-out-diag-2
imghvr-shutter-in-horiz
imghvr-shutter-in-vert
imghvr-shutter-in-out-horiz
imghvr-shutter-in-out-vert
imghvr-shutter-in-out-diag-1
imghvr-shutter-in-out-diag-2
imghvr-fold-up
imghvr-fold-down
imghvr-fold-left
imghvr-fold-right
imghvr-zoom-in
imghvr-zoom-out
imghvr-zoom-out-up
imghvr-zoom-out-down
imghvr-zoom-out-left
imghvr-zoom-out-right
imghvr-zoom-out-flip-horiz
imghvr-zoom-out-flip-vert
imghvr-blur

统一修改hover效果的背景颜色方法,修改 imagehover.css 文件:

[class^='imghvr-'],
[class*=' imghvr-'] {
  background-color: #D14233;
}

单独修改某个hover效果代码:

<figure class="imghvr-fade" style="background-color:#D14233;">
    <img src="#">
    <figcaption>
      // Hover Content
    </figcaption>
</figure>

如果文章对你有帮助,请赞赏支持本站发展!

评论

发表评论

此字段内容将保密,不会被其他人看见。