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功能强大，由于各种浏览器的限制，因此适用范围尚不广泛。不过，各位同学不要为此而停止尝试，因为这会是未来建设网站的生力军。
  • 相关阅读:
    web服务器-Apache
    nginx优化
    nginx下载限速
    nginx-URL重写
    HDU 5358 First One 求和（序列求和，优化）
    HDU 5360 Hiking 登山 （优先队列，排序）
    HDU 5353 Average 糖果分配（模拟，图）
    UVALive 4128 Steam Roller 蒸汽式压路机（最短路，变形） WA中。。。。。
    HDU 5348 MZL's endless loop 给边定向（欧拉回路，最大流）
    HDU 5344 MZL's xor (水题)
  • 原文地址：https://www.cnblogs.com/aimyfly/p/3135196.html
Copyright © 2011-2022 走看看