最新消息:

CSS第9款:Imagehover.css 纯CSS打造的图片悬停效果

CSS模块 杨红伟 186浏览

用过很多图片县停效果,说实在话,很多都不好用。我大致说一下原因:

1、对基础CSS影响比较大;
2、附加的插件太多;
3、还要引用有一些JS。

而CSS3的诞生,对我们前端开发来说,有了质的飞跃!下边就讲一下这个 ImageHover.css ,它实现这样或才那样的效果特别方便!

mark

一:下载地址

https://github.com/ciar4n/imagehover.css

二:演示地址

http://www.imagehover.io/

三:最简单例子

主要看下边的代码!简单的不能不能的,我这里就不讲了!

<link href="https://cdnjs.cloudflare.com/ajax/libs/imagehover.css/1.0/css/imagehover.min.css" rel="stylesheet" media="all">

<figure class="imghvr-fade">
    <img src="example-image.jpg" alt="example-image">
    <figcaption>
    <h3>图片标题</h3>
    <p>图片简介:这是一个例子!</p>
    </figcaption>
    <a href="javascript:;"></a>
</figure>

四:特效样式

注:只要把 imghvr-fade 更改成下边的样式即可!

<figure class="imghvr-fade"></figure>

下边是全部的免费样式!一共44个免费的样式!官方总共有216个样式,不过得19刀!

1、fade 褪色 (1个)

样式 说明
imghvr-fade 褪色

2、push 推 (4个)

样式 说明
imghvr-push-up 向上推
imghvr-push-down 向下推
imghvr-push-left 向左推
imghvr-push-right 向右推

3、slide 滑动 (4个)

样式 说明
imghvr-slide-up 向上滑动
imghvr-slide-down 向下滑动
imghvr-slide-left 向左滑动
imghvr-slide-right 向右滑动

4、reveal 揭开 (4个)

样式 说明
imghvr-reveal-up 向上揭开
imghvr-reveal-down 向下揭开
imghvr-reveal-left 向左揭开
imghvr-reveal-right 向右揭开

5、hinge 合页 (4个)

样式 说明
imghvr-hinge-up 向上合页
imghvr-hinge-down 向下合页
imghvr-hinge-left 向左合页
imghvr-hinge-right 向右合页

6、flip 翻动 (4个)

样式 说明
imghvr-flip-horiz 水平翻动
imghvr-flip-vert 垂直翻动
imghvr-flip-diag-1 左角翻动
imghvr-flip-diag-2 右角翻动

7、shutter 快门 (10个)

样式 说明
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 右斜角往里、往外快门

8、fold 折叠 (4个)

样式 说明
imghvr-fold-up 向上折叠
imghvr-fold-down 向下折叠
imghvr-fold-left 向左折叠
imghvr-fold-right 向右折叠

9、zoom 放大 (9个)

样式 说明
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 翻转水平放大

10、blur 模糊 (1个)

样式 说明
imghvr-blur 模糊