5种CSS3 Transitions炫酷图片标题特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款效果非常酷的CSS3 Transitions图片标题特效。这组图片标题特效共5种不同的效果，都是使用CSS3 Transitions过渡动画来制作，分别是移动动画，翻转动画，缩放动画，旋转动画等。

这组动画在桌面设备上使用鼠标滑过图片来产生图片标题动画效果。在移动触摸设备上，由于没有hover事件，特效中使用Modernizr来检测设备，当检测到是移动触摸设备时，改用touch事件来取代hover事件。在移动触摸设备上，当图片标题显示之后，会有一个关闭按钮出现，用于关闭当前的图片标题效果。

制作方法

HTML结构

该图片标题的HTML结构使用HTML5 figure标签来制作，该标签允许我们设置一张图片和一个图片标题。当我们用鼠标滑过这个元素的时候，图片会向外移动，而图片标题会平滑的过渡显示出来。

特效中会使用Modernizr来识别是否是可触摸设备，在非触摸设备上，html标签上会被设置.no-touchclass。而在移动触摸设备上，使用一些javascript来添加.hover class。对于移动设备，Modernizr会在html标签上添加.touch class，

<figure>
    <img src="img/img-src.jpg" alt="">
    <figcaption>
        <h3>Image title</h3>
        <span>Image Caption</span>
        <a href="#" class="close-caption hidden">x</a>
    </figcaption>
</figure>

CSS样式

figure元素采用相对定位的方式，这样在它里面的图片和标题就可以采用绝对定位的方式来堆叠在一起。

图片显示为display:block，也使用相对定位的方式。图片标题则采用绝对定位的方式。开始的时候图片的z-index要大于标题的z-index。

figure {
    margin: 0;
    position: relative;
}
figure img {
    display: block;
    position: relative;
    z-index: 10;
    max-width: 100%;
    height: auto;
}
figure figcaption {
    display: block;
    position: absolute;
    z-index: 5;
}
figure h3 {
    color: #fff;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 10px;
}
figure span {
    color: #b2cce1;
    display: block;
    line-height: 1.2;
}
figure a.close-caption {
    display: block;
    position: absolute;
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 44px;
    font-size: 24px;
    font-weight: 700;
    color: #315a7d;
}
figure a.close-caption.hidden {
    display: none
}

在第一种图片标题的效果中，当我们用鼠标滑过figure元素，图片会向上滑动，图片标题被显露出来。这里是在鼠标滑过时使用CSS transform来设置translateY。

#effect-1 a.close-caption {
    bottom: 10px;
    right: 10px;
}
#effect-1 figure {
    background-color: steelblue
}
#effect-1 figcaption {
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
}
#effect-1 figure img {
    transition: all 0.3s;
}
.no-touch #effect-1 figure:hover img,
#effect-1 figure.hover img {
    transform: translateY(-90px);
}

其它几种效果的实现方法也非常简单，具体参考下载文件。