导语
CSS3的强大自不必言说，在过去，想要为图片实现简单的过渡效果需要敲上一大堆JavaScript代码。而如今，CSS3让这些都变得简单起来。
代码下载与效果演示
本教程中涉及的图片和文字的切换效果完全由CSS3所实现。（译注：这篇教程适用于有一定CSS基础的同学）
浏览器兼容性
文字的动态效果依赖于变形（transform）和过渡（transition）两个属性，这是CSS3相对较新的功能。为了顺利显示效果，要注意浏览器的兼容性。
下列浏览器已支持CSS3的变形和过渡效果。
- Internet Explorer 10+ (尚未发布)
- Firefox 6+
- Chrome 13+
- Safari 3.2+
- Opera 11+
马上开始学习吧！
建立HTML框架
我们准备了6张图片，每张图片的说明文字的显示方式都不相同。
- <div id=”mainwrapper”><!– This #mainwrapper section contains all of our images to make them center and look proper in the browser ->
- <!– Image Caption 1 –>
- <div id=”box-1″ class=”box”>
- <img id=”image-1″ src=”css3-image-captions/1.jpg”/>
- <span class=”caption simple-caption”>
- <p>Simple Caption</p>
- </span>
- </div>
- <!– Image Caption 2 –>
- <div id=”box-2″ class=”box”>
- <img id=”image-2″ src=”css3-image-captions/2.jpg”/>
- <span class=”caption full-caption”>
- <h3>Full Caption</h3>
- <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
- </span>
- </div>
- <!– Image Caption 3 –>
- <div id=”box-3″ class=”box”>
- <img id=”image-3″ src=”css3-image-captions/3.jpg”/>
- <span class=”caption fade-caption”>
- <h3>Fade Caption</h3>
- <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
- </span>
- </div>
- <!– Image Caption 4 –>
- <div id=”box-4″ class=”box”>
- <img id=”image-4″ src=”css3-image-captions/4.jpg”/>
- <span class=”caption slide-caption”>
- <h3>Slide Caption</h3>
- <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
- </span>
- </div>
- <!– Image Caption 5 –>
- <div id=”box-5″ class=”box”>
- <div class=”rotate”><!– Rotating div –>
- <img id=”image-5″ src=”css3-image-captions/5.jpg”/>
- <span class=”caption rotate-caption”>
- <h3>This is rotate caption</h3>
- <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
- </span>
- </div>
- </div>
- <!– Image Caption 6 –>
- <div id=”box-6″ class=”box”>
- <img id=”image-6″ src=”css3-image-captions/6.jpg”/>
- <span class=”caption scale-caption”>
- <h3>Free Style Caption</h3>
- <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
- </span>
- </div>
- </div> <!– end of #mainwrapper–>
基础CSS代码
在为其中的元素设计样式之前，通常用会CSS reset重置所有属性，让他们恢复到默认样式值，这样所有的浏览器都会呈现出同样的效果。（IE6可能不支持）
这些样式是单独存放在style.css的文档中，这样HTML文档看起来就会十分简洁。不过，一定要记得在<head>标签当中加上style.css的链接。如下面的代码所示：
<link href=”style.css” rel=”stylesheet” type=”text/css” media=”screen” />
- html { background-color: #eaeaea; }
- #mainwrapper {
- font: 10pt normal Arial, sans-serif;
- height: auto;
- margin: 80px auto 0 auto;
- text-align: center;
- width: 660px;
- }
图片框样式
我们对图片框（包含图片在内）应用一些常见样式。首先，将浮动元素float的值设为left，即float：left，以使图片框并排显示（side by side），注意，溢出元素overflow的值设为hidden，即overflow：hidden，这样可以使得div层中的所有对象都被隐藏起来。
接下来，为图片框内的每一张图片声明过渡属性，因为，稍后我们会使图片产生过渡效果。
- #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;
- }
为文字说明设计样式
为caption类设置基本样式和过渡效果。在过渡效果的实现上，我们采用RCBA颜色模式来处理，而非不透明属性，这样能够在不影响文字阅读的前提下实现透明效果，将alpha通道的值设为0.8即可，其余通道默认为0，即：background-color：rgba（0,0,0,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
本例实现的是常见的简单文字过渡效果。当鼠标悬停在图片上时，文字自下而上显示。文字域的固定高度为30像素，并隐藏在图片的下方，即：bottombottom：-30px。
- #mainwrapper .box .simple-caption {
- height: 30px;
- width: 200px;
- display: block;
- bottombottom: -30px;
- line-height: 25pt;
- text-align: center;
- }
效果2
本例中的文字域部分完全与图片（或图片框）登高等宽，即：200像素x200像素。其实现效果像是滑动门，从上到下滑动呈现出文字。
- #mainwrapper .box .full-caption {
- width: 170px;
- height: 170px;
- top: -200px;
- text-align: left;
- padding: 15px;
- }
效果3
本例是实现渐隐效果（fading effect），为此需要为初始状态添加不透明度，即opacity：0。
- #mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption {
- opacity: 0;
- width: 170px;
- height: 170px;
- text-align: left;
- padding: 15px;
- }
效果4
本例是实现文字从左向右滑动，为此，我们使图片向左移动200像素作为它的初始位置，即left：200px。
- ** Caption 4: Slide **/
- #mainwrapper .box .slide-caption {
- width: 170px;
- height: 170px;
- text-align: left;
- padding: 15px;
- left: 200px;
- }
效果5
本例是实现旋转效果（rotating effect），图片和文字同时旋转，两者位置会发生改变。
我们使用变形属性使两者旋转180°，即：transform：rotate（-180deg）。
- #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;
- }
效果6
本例实现的是（图片）按比例放大的效果，不过这跟上一个效果有所不同，文本内容不会跟着放大。
在本例中，文字是在放大效果显示之后才出现的。为此，我们需要为文本内容添加延时。（对应为h3和p标签应用延时）
- #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;
- }
动态效果的实现
当鼠标悬停在图片框时，文字会从下向上显现。我们结合变形属性（transform）和CSS代码共同实现。
- #mainwrapper .box:hover .simple-caption {
- -moz-transform: translateY(-100%);
- -o-transform: translateY(-100%);
- -webkit-transform: translateY(-100%);
- transform: translateY(-100%);
- }
如果你不明白translateY的负值是什么，请参考这篇文章。
与上例相反，这里的文字是从自上而下的移动，因此translateY的值设为正值。
- #mainwrapper .box:hover .full-caption {
- -moz-transform: translateY(100%);
- -o-transform: translateY(100%);
- -webkit-transform: translateY(100%);
- transform: translateY(100%);
- }
本例最为简单。我们只需将不透明度改为1，即可实现文本内容可见。此前我们已在caption类中添加了过渡属性，所以它能平滑过渡。
- #mainwrapper .box:hover .fade-caption {
- opacity: 1;
- }
动作4：向左滑动
前面已讲过，文字内容从左向右滑动显现。但是，图片却是向右滑出，所以，我们需要写针对图片和文字分别写CSS代码。
下面这段CSS代码实现的是当鼠标悬停时，文字域按完整宽度向左移动，注意，为了使其水平从右向左移动，我们使用了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：旋转效果
本例是实现图片和文字域旋转，当鼠标悬停时，包含了图片和文字的div层逆时针旋转，图片隐藏，文字显示。
- /** Rotate Caption :hover Behaviour **/
- #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：按比例放大
本例融合了几种变形效果。当鼠标悬停，图片会从初始尺寸按140的比例放大（即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);
我们已经对本例中文本内容进行了水平向左的隐藏处理，只要触发鼠标事件时它才会显示。即：translateX（200px）。以下的CSS代码是具体如何实现文字的是文字从左向右的移动和滑入效果。
- #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);
- }
总结
尽管CSS功能强大，由于各种浏览器的限制，因此适用范围尚不广泛。不过，各位同学不要为此而停止尝试，因为这会是未来建设网站的生力军。