每一种美，都会有一双眼睛能看到；每一份爱，总会有一颗心会感受到。

css3demo

【教程】使用CSS3实现6个酷炫的图片文字切换效果

发表于 2012/11/13 作者 jaysming — 2条评论

导语

CSS3的强大自不必言说，在过去，想要为图片实现简单的过渡效果需要敲上一大堆JavaScript代码。而如今，CSS3让这些都变得简单起来。

【教程】使用CSS3实现6个酷炫的图片文字切换效果

代码下载与效果演示

【教程】使用CSS3实现6个酷炫的图片文字切换效果【教程】使用CSS3实现6个酷炫的图片文字切换效果

本教程中涉及的图片和文字的切换效果完全由CSS3所实现。（译注：这篇教程适用于有一定CSS基础的同学）

浏览器兼容性

文字的动态效果依赖于变形（transform）和过渡（transition）两个属性，这是CSS3相对较新的功能。为了顺利显示效果，要注意浏览器的兼容性。

下列浏览器已支持CSS3的变形和过渡效果。

  • Internet Explorer 10+ (尚未发布)
  • Firefox 6+
  • Chrome 13+
  • Safari 3.2+
  • Opera 11+

马上开始学习吧！

建立HTML框架

我们准备了6张图片，每张图片的说明文字的显示方式都不相同。

  1. <div id=”mainwrapper”><!– This #mainwrapper section contains all of our images to make them center and look proper in the browser ->
  2.     <!– Image Caption 1 –>
  3.     <div id=”box-1″ class=”box”>
  4.         <img id=”image-1″ src=”css3-image-captions/1.jpg”/>
  5.         <span class=”caption simple-caption”>
  6.         <p>Simple Caption</p>
  7.         </span>
  8.     </div>
  10.     <!– Image Caption 2 –>
  11.     <div id=”box-2″ class=”box”>
  12.         <img id=”image-2″ src=”css3-image-captions/2.jpg”/>
  13.         <span class=”caption full-caption”>
  14.         <h3>Full Caption</h3>
  15.         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  16.         </span>
  17.     </div>
  19.     <!– Image Caption 3 –>
  20.     <div id=”box-3″ class=”box”>
  21.         <img id=”image-3″ src=”css3-image-captions/3.jpg”/>
  22.         <span class=”caption fade-caption”>
  23.         <h3>Fade Caption</h3>
  24.         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  25.         </span>
  26.     </div>
  28.     <!– Image Caption 4 –>
  29.     <div id=”box-4″ class=”box”>
  30.         <img id=”image-4″ src=”css3-image-captions/4.jpg”/>
  31.         <span class=”caption slide-caption”>
  32.         <h3>Slide Caption</h3>
  33.         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  34.         </span>
  35.     </div>
  37.     <!– Image Caption 5 –>
  38.     <div id=”box-5″ class=”box”>
  39.         <div class=”rotate”><!– Rotating div –>
  40.             <img id=”image-5″ src=”css3-image-captions/5.jpg”/>
  41.             <span class=”caption rotate-caption”>
  42.             <h3>This is rotate caption</h3>
  43.             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  44.             </span>
  45.         </div>
  46.     </div>
  48.     <!– Image Caption 6 –>
  49.     <div id=”box-6″ class=”box”>
  50.         <img id=”image-6″ src=”css3-image-captions/6.jpg”/>
  51.         <span class=”caption scale-caption”>
  52.         <h3>Free Style Caption</h3>
  53.         <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  54.         </span>
  55.     </div>
  56. </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标签和id号为mainwrapper（即：#mainwrapper）开始，如下所示：
  1. html { background-color: #eaeaea; }
  3. #mainwrapper {
  4.   font: 10pt normal Arial, sans-serif;
  5.   height: auto;
  6.   margin: 80px auto 0 auto;
  7.   text-align: center;
  8.   width: 660px;
  9. }

【教程】使用CSS3实现6个酷炫的图片文字切换效果

图片框样式

我们对图片框（包含图片在内）应用一些常见样式。首先，将浮动元素float的值设为left，即float：left，以使图片框并排显示（side by side），注意，溢出元素overflow的值设为hidden，即overflow：hidden，这样可以使得div层中的所有对象都被隐藏起来。

接下来，为图片框内的每一张图片声明过渡属性，因为，稍后我们会使图片产生过渡效果。

  1. #mainwrapper .box {
  2.     border: 5px solid #fff;
  3.     cursor: pointer;
  4.     height: 182px;
  5.     float: left;
  6.     margin: 5px;
  7.     position: relative;
  8.     overflow: hidden;
  9.     width: 200px;
  10.     -webkit-box-shadow: 1px 1px 1px 1px #ccc;
  11.     -moz-box-shadow: 1px 1px 1px 1px #ccc;
  12.     box-shadow: 1px 1px 1px 1px #ccc;
  13. }
  15. #mainwrapper .box img {
  16.     position: absolute;
  17.     left: 0;
  18.     -webkit-transition: all 300ms ease-out;
  19.     -moz-transition: all 300ms ease-out;
  20.     -o-transition: all 300ms ease-out;
  21.     -ms-transition: all 300ms ease-out;
  22.     transition: all 300ms ease-out;
  23. }

【教程】使用CSS3实现6个酷炫的图片文字切换效果

为文字说明设计样式

为caption类设置基本样式和过渡效果。在过渡效果的实现上，我们采用RCBA颜色模式来处理，而非不透明属性，这样能够在不影响文字阅读的前提下实现透明效果，将alpha通道的值设为0.8即可，其余通道默认为0，即：background-color：rgba（0,0,0,0.8）。

  1. #mainwrapper .box .caption {
  2.     background-color: rgba(0,0,0,0.8);
  3.     position: absolute;
  4.     color: #fff;
  5.     z-index: 100;
  6.     -webkit-transition: all 300ms ease-out;
  7.     -moz-transition: all 300ms ease-out;
  8.     -o-transition: all 300ms ease-out;
  9.     -ms-transition: all 300ms ease-out;
  10.     transition: all 300ms ease-out;
  11.     left: 0;
  12. }

【教程】使用CSS3实现6个酷炫的图片文字切换效果

效果1  

本例实现的是常见的简单文字过渡效果。当鼠标悬停在图片上时，文字自下而上显示。文字域的固定高度为30像素，并隐藏在图片的下方，即：bottombottom：-30px。

  1. #mainwrapper .box .simple-caption {
  2.     height: 30px;
  3.     width: 200px;
  4.     display: block;
  5.     bottombottom: -30px;
  6.     line-height: 25pt;
  7.     text-align: center;
  8. }

效果2

本例中的文字域部分完全与图片（或图片框）登高等宽，即：200像素x200像素。其实现效果像是滑动门，从上到下滑动呈现出文字。

  1. #mainwrapper .box .full-caption {
  2.     width: 170px;
  3.     height: 170px;
  4.     top: -200px;
  5.     text-align: left;
  6.     padding: 15px;
  7. }

效果3

本例是实现渐隐效果（fading effect），为此需要为初始状态添加不透明度，即opacity：0。

  1. #mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption {
  2.     opacity: 0;
  3.     width: 170px;
  4.     height: 170px;
  5.     text-align: left;
  6.     padding: 15px;
  7. }

效果4

本例是实现文字从左向右滑动，为此，我们使图片向左移动200像素作为它的初始位置，即left：200px。

  1. ** Caption 4: Slide **/
  2. #mainwrapper .box .slide-caption {
  3.     width: 170px;
  4.     height: 170px;
  5.     text-align: left;
  6.     padding: 15px;
  7.     left: 200px;
  8. }

效果5

本例是实现旋转效果（rotating effect），图片和文字同时旋转，两者位置会发生改变。

我们使用变形属性使两者旋转180°，即：transform：rotate（-180deg）。

  1. #mainwrapper #box-5.box .rotate-caption {
  2.     width: 170px;
  3.     height: 170px;
  4.     text-align: left;
  5.     padding: 15px;
  6.     top: 200px;
  7.     -moz-transform: rotate(-180deg);
  8.     -o-transform: rotate(-180deg);
  9.     -webkit-transform: rotate(-180deg);
  10.     transform: rotate(-180deg);
  11. }
  13. #mainwrapper .box .rotate {
  14.     width: 200px;
  15.     height: 400px;
  16.     -webkit-transition: all 300ms ease-out;
  17.     -moz-transition: all 300ms ease-out;
  18.     -o-transition: all 300ms ease-out;
  19.     -ms-transition: all 300ms ease-out;
  20.     transition: all 300ms ease-out;
  21. }

效果6

本例实现的是（图片）按比例放大的效果，不过这跟上一个效果有所不同，文本内容不会跟着放大。

在本例中，文字是在放大效果显示之后才出现的。为此，我们需要为文本内容添加延时。（对应为h3和p标签应用延时）

  1. #mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p {
  2.     position: relative;
  3.     left: -200px;
  4.     width: 170px;
  5.     -webkit-transition: all 300ms ease-out;
  6.     -moz-transition: all 300ms ease-out;
  7.     -o-transition: all 300ms ease-out;
  8.     -ms-transition: all 300ms ease-out;
  9.     transition: all 300ms ease-out;
  10. }
  12. #mainwrapper .box .scale-caption h3 {
  13.     -webkit-transition-delay: 300ms;
  14.     -moz-transition-delay: 300ms;
  15.     -o-transition-delay: 300ms;
  16.     -ms-transition-delay: 300ms;
  17.     transition-delay: 300ms;
  18. }
  20. #mainwrapper .box .scale-caption p {
  21.     -webkit-transition-delay: 500ms;
  22.     -moz-transition-delay: 500ms;
  23.     -o-transition-delay: 500ms;
  24.     -ms-transition-delay: 500ms;
  25.     transition-delay: 500ms;
  26. }

【教程】使用CSS3实现6个酷炫的图片文字切换效果

动态效果的实现

 

动作1：文字显现

当鼠标悬停在图片框时，文字会从下向上显现。我们结合变形属性（transform）和CSS代码共同实现。

  1. #mainwrapper .box:hover .simple-caption {
  2.     -moz-transform: translateY(-100%);
  3.     -o-transform: translateY(-100%);
  4.     -webkit-transform: translateY(-100%);
  5.     transform: translateY(-100%);
  6. }

如果你不明白translateY的负值是什么，请参考这篇文章。

 

动作2：文字向下移动

与上例相反，这里的文字是从自上而下的移动，因此translateY的值设为正值。

  1. #mainwrapper .box:hover .full-caption {
  2.     -moz-transform: translateY(100%);
  3.     -o-transform: translateY(100%);
  4.     -webkit-transform: translateY(100%);
  5.     transform: translateY(100%);
  6. }

 

动作3：渐隐效果

本例最为简单。我们只需将不透明度改为1，即可实现文本内容可见。此前我们已在caption类中添加了过渡属性，所以它能平滑过渡。

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

 

动作4：向左滑动

前面已讲过，文字内容从左向右滑动显现。但是，图片却是向右滑出，所以，我们需要写针对图片和文字分别写CSS代码。

下面这段CSS代码实现的是当鼠标悬停时，文字域按完整宽度向左移动，注意，为了使其水平从右向左移动，我们使用了translateX。

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

这段代码实现的是当鼠标悬停，图片向左滑出的效果。

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

 

动作5：旋转效果

本例是实现图片和文字域旋转，当鼠标悬停时，包含了图片和文字的div层逆时针旋转，图片隐藏，文字显示。

  1. /** Rotate Caption :hover Behaviour **/
  2.     #mainwrapper .box:hover .rotate {
  3.     background-color: rgba(0,0,0,1) !important;
  4.     -moz-transform: rotate(-180deg);
  5.     -o-transform: rotate(-180deg);
  6.     -webkit-transform: rotate(-180deg);
  7.     transform: rotate(-180deg);
  8. }

 

动作6：按比例放大

本例融合了几种变形效果。当鼠标悬停，图片会从初始尺寸按140的比例放大（即1.4）。

  1. #mainwrapper .box:hover #image-6 {
  2.    -moz-transform: scale(1.4);
  3.    -o-transform: scale(1.4);
  4.    -webkit-transform: scale(1.4);
  5.    transform: scale(1.4);

我们已经对本例中文本内容进行了水平向左的隐藏处理，只要触发鼠标事件时它才会显示。即：translateX（200px）。以下的CSS代码是具体如何实现文字的是文字从左向右的移动和滑入效果。

  1. #mainwrapper .box:hover .scale-caption h3,
  2. #mainwrapper .box:hover .scale-caption p {
  3.     -moz-transform: translateX(200px);
  4.     -o-transform: translateX(200px);
  5.     -webkit-transform: translateX(200px);
  6.     transform: translateX(200px);
  7. }

总结

尽管CSS功能强大，由于各种浏览器的限制，因此适用范围尚不广泛。不过，各位同学不要为此而停止尝试，因为这会是未来建设网站的生力军。

 

posted @ 2013-06-14 11:04  温暖向阳Love  阅读(695)  评论(0)  编辑  收藏  举报