8种炫酷CSS3鼠标滑过图片标题动画特效

当前位置:主页 > CSS3库 > CSS3动画 > 8种炫酷CSS3鼠标滑过图片标题动画特效
8种炫酷CSS3鼠标滑过图片标题动画特效
分享:

    插件介绍

    这是一组使用CSS3制作的超酷鼠标滑过图片标题动画特效。这组特效中共有8种不同的鼠标滑过效果,它们都是通过CSS3 transform来制作遮罩层的各种动画特效。

    浏览器兼容性

    浏览器兼容性
    时间:2016-07-16
    阅读:
麦子学院
简要教程

这是一组使用CSS3制作的超酷鼠标滑过图片标题动画特效。这组特效中共有8种不同的鼠标滑过效果,它们都是通过CSS3 transform来制作遮罩层的各种动画特效。

使用方法

在页面中引入imghover.css文件。

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

这组鼠标滑过图片动画特效的HTML结构非常简单,如下:

<figure class="imghvr-book-open-horiz">
  <img src="#">
  <figcaption>
    // 鼠标滑过显示的内容
  </figcaption>
  <a href="#"></a>
</figure>
                
CSS样式

figure元素上添加你想要的鼠标滑过效果的class类即可使用这种效果。可用的class类有:

  • imghvr-book-open-horiz
  • imghvr-strip-shutter-right
  • imghvr-throw-in-left
  • imghvr-blocks-zoom-top-left
  • imghvr-border-reveal-top-left
  • imghvr-cube-left
  • imghvr-blocks-rotate-in-left
  • imghvr-dive-cc

网友评论