带CSS过渡效果的HTML5图片标题动画

查看演示

带CSS过渡效果的HTML5图片标题动画技术已经被许多WEB前端开发者使用了，我们将使用一个简短的教程来说明这种效果是如何实现的。在这个教程中列举了两个例子：一个是背景图片淡入淡出效果，一个是背景图片水平滚动效果。这两种效果的图片标题都是滑动显示。

HTML5结构的代码如下：

<div id="sliding-container">
    <figure>
        <img src="hong-kong-skyline.jpg" alt="">
        <figcaption>Hong Kong Skyline at Night</figcaption>
    </figure>
    <figure>
        <img src="monument-valley-panorama.jpg" alt="" style="position: absolute">
        <img src="monument-valley-mittens-panorama.jpg" alt="">
        <figcaption>Monument Valley</figcaption>
    </figure>
</div>                                
                            

我们需要给每一个<figure>元素设置relative定位。这样便于制作图片的淡入淡出效果。通过设置overflow: hidden;来隐藏所有超出显示区域的东西，然后还要把<figure>元素设置为并排浮动。

div#sliding-container figure { margin: 0; 
    padding: 0; 
    position: relative; 
    width: 50%; 
    font-size: 0;
    overflow: hidden; 
}
div#sliding-container figure:nth-child(1) { float: left; }
div#sliding-container figure:nth-child(2) { float: right; }                                
                            

图片的标题的背景色使用RGBA模式的颜色，定位设置为绝对定位：

div#sliding-container figure figcaption{
    background:rgba(0,0,0,.5);
    font-size:1rem;
    width:100%;
    color:#fff;
    padding:.3rem;
    position:absolute;
    margin:0;
    transition:.6s;
    text-align: center;
}                              
                            

要制作当用户鼠标滑过图片时图片标题升起的效果是非常简单的：可以简单的为<figure>元素附加一个:hover伪类，用于改变<figcaption>的位置。

div#sliding-container figure:hover figcaption { transform: translateY(-2rem); }                               
                            

接下来要使<figure>元素中的图片动起来。首先，我们需要正确设置它们：

div#sliding-container figure img { 
    max-width: 100%;
    transition-duration: 2.4s;
    transition-property: transform, opacity;
    transition-timing-function: linear; 
}
div#sliding-container figure:nth-child(1) img { max-width: 133%; }                                
                            

第一个demo的图片要比容器大，要将图片从右向左移动：

div#sliding-container figure:nth-child(1):hover img { transform: translateX(-24%); }                                
                            

在第二个demo中，因为图片是绝对定位，所以两张图片会互相重叠。我们需要在鼠标滑过图片时渐隐第一张图片，如果使用类选择器来查找图片会相对复杂，我们可以简单的给<figure>元素一个ID：

div#sliding-container figure:nth-child(2):hover img:nth-child(1) { opacity: 0; }                                
                            

到此两种带CSS过渡效果的HTML5图片标题动画都做好了，一起来体验一下吧！

查看演示