CSS3 Transitions炫酷图片标题特效

PetitQ 图片/图形 2019-1-22 1.81K 0 0

这是一款效果非常酷的 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);
```
```
}
```

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

CSS3 Transitions 炫酷图片标题特效

已有 452 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

图片/图形

CSS3 Transitions炫酷图片标题特效

HTML 结构

CSS 样式

CSS3 Transitions 炫酷图片标题特效

相关文章

Filerobot 图片编辑器Javascript插件

BookBlock可预览CSS3翻书效果

html5+js拖拽式超弹性效果堆叠图片切换展示特效

发表回复取消回复

热销模板

图片/图形

HTML 结构

CSS 样式

CSS3 Transitions 炫酷图片标题特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复