在线预览 http://www.w2bc.com/upload/201607/17/201607161556/index.html 源码下载 http://www.w2bc.com/download/index/158958
这是一组使用 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
来源: http://www.qdfuns.com/article/16384/d93e85efe900118c4afb104c604bd83b.html