登录注册

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

插件特效
2026-07-26 07:04 3 次浏览 • 0 次下载 11.4KB
纯CSS3鼠标滑过图片效果动画库imagehover.css

使用方法

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

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

HTML结构

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

1
2
3
4
5
6
7
<figure class="imghvr-fade">
<img src="#">
<figcaption>
// Hover Content
</figcaption>
<a href="#"></a>
</figure>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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

评论