zoukankan      html  css  js  c++  java

  • 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.    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.      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.      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.      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.      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.      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.      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.      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.      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功能强大，由于各种浏览器的限制，因此适用范围尚不广泛。不过，各位同学不要为此而停止尝试，因为这会是未来建设网站的生力军。
  • 相关阅读:
    我是如何学习写一个操作系统（七）：进程的同步与信号量
    我是如何学习写一个操作系统（六）：进程的调度
    我是如何学习写一个操作系统（五）：故事的高潮之进程和线程1
    我是如何学习写一个操作系统（四）：操作系统之系统调用
    我是如何学习写一个操作系统（三）：操作系统的启动之保护模式
    我是如何学习写一个操作系统（二）：操作系统的启动之Bootloader
    我是如何学习写一个操作系统（一）：开篇
    Android计量单位px,in,mm,pt,dp,dip,sp和获取屏幕尺寸与密度
    Azure自定义角色实现RBAC
    Linux两块4TB的数据磁盘创建8TB的Raid0
  • 原文地址：https://www.cnblogs.com/aimyfly/p/3135196.html
Copyright © 2011-2022 走看看