本网站只能被运行在支持JavaScript脚本的环境中

使用CSS 3以动画方式显示图像标题

本文介绍如何使用CSS 3中的transition动画显示图像标题。

示例运行结果

简单标题

完整标题

图像描述文字

淡入式标题

图像描述文字

滑入式标题

图像描述文字

旋转式标题

图像描述文字

放大式标题

图像描述文字

HTML代码

我们将在页面中显示6幅图像,每幅图像拥有不同的样式及图像标题,代码如下所示。

    <div id="mainwrapper">
        <!-- 图像标题1 -->
        <div id="box-1" class="box">
            <img id="image-1" src="css322/1.jpg">
            <span class="caption simple-caption">
                <p>简单标题</p>
            </span>
        </div>
        <!-- 图像标题 2 -->
        <div id="box-2" class="box">
            <img id="image-2" src="css322/2.jpg">
            <span class="caption full-caption">
                <h3>完整标题</h3>
                <p>图像描述文字</p>
            </span>
        </div>
        <!-- 图像标题 3 -->
        <div id="box-3" class="box">
            <img id="image-3" src="css322/3.jpg">
            <span class="caption fade-caption">
                <h3>淡入式标题</h3>
                <p>图像描述文字</p>
            </span>
        </div>
        <!-- 图像标题 4 -->
        <div id="box-4" class="box">
            <img id="image-4" src="css322/4.jpg">
            <span class="caption slide-caption">
                <h3>滑入式标题</h3>
                <p>图像描述文字</p>
            </span>
        </div>
        <!-- 图像标题 5 -->
        <div id="box-5" class="box">
            <div class="rotate">
                <img id="image-5" src="css322/5.jpg">
		<span class="caption rotate-caption">
		    <h3>旋转式标题</h3>
                    <p>图像描述文字</p>
		</span>
            </div>
        </div>
        <!-- 图像标题 6 -->
        <div id="box-6" class="box">
            <img id="image-6" src="css322/6.jpg">
            <span class="caption scale-caption">
                <h3>放大式标题</h3>
                <p>图像描述文字</p>
            </span>
        </div>
    </div>

公共样式代码

我们首先对主容器元素使用如下所示的样式代码:

#mainwrapper {  
    font: 10pt normal;  
    height: auto;  
    margin: 80px auto 0 auto;  
    text-align: center;  
    width: 660px;  
}

接下来,我们需要对所有放置图像的div元素使用一些共同样式。我们需要将这些div元素的float样式属性值设置为left以使其可以并排显示,同时将它们的overflow样式属性值设置为hidden,以使得页面打开时图像标题显示区域可以被隐藏起来。

然后,我们需要对所有图像元素使用一个transition样式属性,以使其可以以动画方式显示。

#mainwrapper .box {  
    border: 5px solid #fff;  
    cursor: pointer;  
    height: 182px;  
    float: left;  
    margin: 5px;  
    position: relative;  
    overflow: hidden;  
    width: 200px;  
    -webkit-box-shadow: 1px 1px 1px 1px #ccc;  
    -moz-box-shadow: 1px 1px 1px 1px #ccc;  
    box-shadow: 1px 1px 1px 1px #ccc;  
}  
#mainwrapper .box img {  
    position: absolute;  
    left: 0;  
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;  
}

所有的图像标题需要有一些统一样式,同时也需要使用transition样式属性。此处我们不使用opacity样式属性,而是使用RGBA颜色模式,同时将alpha通道值设为0.8的方法来使标题看起来有些透明。

#mainwrapper .box .caption {  
    background-color: rgba(0,0,0,0.8);  
    position: absolute;  
    color: #fff;  
    z-index: 100;  
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;  
    left: 0;  
}

图像标题1

我们对第1个图像标题使用一个简单的transition动画。当我们将鼠标指针移动到图像上时图像标题从图像下部滑入。图像标题需要有一个固定高度40px,同时我们将其bottom样式属性设置为-40px,以使得页面打开时图像标题被隐藏。

#mainwrapper .box .simple-caption {  
    height: 40px;  
    width: 200px;  
    display: block;  
    bottombottom: -40px;   
    text-align: center;  
}

为了实现图像标题从图像下部滑入的效果,我们使用transform样式属性并将图像标题向上移动,直至完全移入图像中为止(translateY(-100%))。

#mainwrapper .box:hover .simple-caption {  
    -moz-transform: translateY(-100%);  
    -o-transform: translateY(-100%);  
    -webkit-transform: translateY(-100%);  
    transform: translateY(-100%);  
}

图像标题2

第2个图像标题拥有着与图像相同的宽度与高度,它将从图像上部滑入,直至完全滑入为止。

#mainwrapper .box .full-caption {  
    width: 170px;  
    height: 170px;  
    top: -200px;  
    text-align: left;  
    padding: 15px;  
}

由于第2个图像标题将从图像上部向下滑入,所以我们将translateY函数的参数值设置为正数。

#mainwrapper .box:hover .full-caption {  
    -moz-transform: translateY(100%);  
    -o-transform: translateY(100%);  
    -webkit-transform: translateY(100%);  
    transform: translateY(100%);  
}

图像标题3

第3个图像标题将拥有一个淡入效果,所以我们将其初始opacity样式属性值设置为0。

#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption {  
    opacity: 0;  
    width: 170px;  
    height: 170px;  
    text-align: left;  
    padding: 15px;  
}

第3个图像标题事实上是最容易实现的一个。当鼠标指针移动到图像上时,将图像标题的opacity样式属性值渐变为1即可。由于我们已经对所有的图像标题统一使用transition样式属性,所以此处不必再书写该样式属性。

#mainwrapper .box:hover .fade-caption {  
    opacity: 1;  
}

图像标题4

第四个图像标题将从图像右边滑入,所以我们将其初始left样式属性设置为200px。

#mainwrapper .box .slide-caption {  
    width: 170px;  
    height: 170px;  
    text-align: left;  
    padding: 15px;  
    left: 200px;  
}

在图像标题滑入时,图像也必须从左边滑出,所以我们需要分别为图像及图像标题使用2段样式代码。

首先,我们定义当鼠标指针移动到图像上时将图像标题从右向左滑入,直至完全滑入为止。请注意此处我们使用了translateX函数,因为这次的移动方向为水平方向。

#mainwrapper .box:hover .slide-caption {  
    background-color: rgba(0,0,0,1) !important;  
    -moz-transform: translateX(-100%);  
    -o-transform: translateX(-100%);  
    -webkit-transform: translateX(-100%);  
    opacity: 1;  
    transform: translateX(-100%);  
}

同时,我们定义当鼠标指针移动到图像上时将图像从右向左滑出,直至完全滑出为止。

#mainwrapper .box:hover img#image-4 {  
    -moz-transform: translateX(-100%);  
    -o-transform: translateX(-100%);  
    -webkit-transform: translateX(-100%);  
    transform: translateX(-100%);  
}

图像标题5

第二个图像标题将拥有一个旋转特效。不仅是图像标题将会旋转,图像本身也将同步旋转。

为了将图像标题旋转180度,我们在其初始样式中对其使用一个transform动画并将其旋转180度。

#mainwrapper #box-5.box .rotate-caption{  
    width: 170px;  
    height: 170px;  
    text-align: left;  
    padding: 15px;  
    top: 200px;  
    -moz-transform: rotate(-180deg);  
    -o-transform: rotate(-180deg);  
    -webkit-transform: rotate(-180deg);  
    transform: rotate(-180deg);  
}  
  
#mainwrapper .box .rotate {  
    width: 200px;  
    height: 400px;  
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;  
}

当用户鼠标指针移动到图像上时,我们将图像标题及图像的容器元素旋转-180度,使图像标题被显示,图像被隐藏。

#mainwrapper .box:hover .rotate {  
    background-color: rgba(0,0,0,1) !important;  
    -moz-transform: rotate(-180deg);  
    -o-transform: rotate(-180deg);  
    -webkit-transform: rotate(-180deg);  
    transform: rotate(-180deg);  
}

图像标题6

最后一个图像将拥有一个放大效果,为了防止在图像被放大时显示图像标题中的文字,我们对图像标题区域中的h3元素与p元素使用transition-delay样式属性(用于延迟动画开始时间)。

#mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p {  
    position: relative;  
    left: -200px;  
    width: 170px;  
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;  
}  
  
#mainwrapper .box .scale-caption h3 {  
    -webkit-transition-delay: 300ms;  
    -moz-transition-delay: 300ms;  
    -o-transition-delay: 300ms;  
    -ms-transition-delay: 300ms;  
    transition-delay: 300ms;  
}  
  
#mainwrapper .box .scale-caption p {  
    -webkit-transition-delay: 500ms;  
    -moz-transition-delay: 500ms;  
    -o-transition-delay: 500ms;  
    -ms-transition-delay: 500ms;  
    transition-delay: 500ms;  
}

当用户鼠标指针移动到图像上时,我们首先需要将图像放大1.4倍。

#mainwrapper .box:hover #image-6 {  
   -moz-transform: scale(1.4);  
   -o-transform: scale(1.4);  
   -webkit-transform: scale(1.4);  
   transform: scale(1.4); 
}

在图像标题区域的初始样式代码中,为了隐藏图像标题区域中的文字,我们已经设置h3元素与p元素的left属性值为-200px,现在,我们需要将它们向右移动200px,以使其被显示。

#mainwrapper .box:hover .scale-caption h3,  
#mainwrapper .box:hover .scale-caption p {  
    -moz-transform: translateX(200px);  
    -o-transform: translateX(200px);  
    -webkit-transform: translateX(200px);  
    transform: translateX(200px);  
}