你的位置:首页 > 网页设计

[网页设计]8种炫酷CSS3鼠标滑过图片标题动画特效


在线预览    源码下载

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

 使用方法

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

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



 HTML结构

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

1
2
3
4
5
6
7
<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

在线预览    源码下载