imagehover.css-纯CSS3鼠标滑过图片效果动画库

当前位置:主页 > CSS3库 > CSS3动画 > imagehover.css-纯CSS3鼠标滑过图片效果动画库
imagehover.css-纯CSS3鼠标滑过图片效果动画库
分享:

    插件介绍

    imagehover.css是一款纯CSS3鼠标滑过图片效果动画库。它可以适应图片的缩放,提供44种不同的鼠标滑过图片效果,压缩后的版本只有19K大小,可以完成各种不同场景的需求。

    浏览器兼容性

    浏览器兼容性
    时间:2016-03-15
    阅读:
简要教程

imagehover.css是一款纯CSS3鼠标滑过图片效果动画库。它可以适应图片的缩放,提供44种不同的鼠标滑过图片效果,压缩后的版本只有19K大小,可以完成各种不同场景的需求。

使用方法

使用时要在页面中引入imagehover.css或imagehover.min.css文件。

<link type="text/css" rel="stylesheet" href="css/imagehover.min.css" />                   
                
HTML结构

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

<figure class="imghvr-fade">
    <img src="#">
    <figcaption>
        // Hover Content
    </figcaption>
    <a href="#"></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

imagehover.css动画库的github地址为:https://github.com/ciar4n/imagehover.css

网友评论