用CSS3实现图片切换效果

当几个页面的整体布局相同，只有某个部分在各页面不同时，可以将整体布局的CSS样式写在同一个.css文件中。本次的CSS实现图片s是每个页面下的图片切换效果不同，除此之外，其他的效果都一样。因此，我们可以创建一个common.css文件设置整体界面的样式。

一、圆形超链接

创建四个超链接a标签，分别为Page1、Page2、Page3、Page4。设置display属性为inline-block，高宽都设置为40px，然后设置border-radius：50%，则边框就变成了一个圆形（注意，当高宽都是相同值时，设置border-radius为50%才是一个圆形，如果高宽不一样，则会显示出椭圆形）。当你把a标签的背景设置一个可见颜色，你就可以看见一个圆形的超链接了。

    display: inline-block;height: 60px;width:60px;border-radius: 50%;

当然，四个a标签链接到四个不同的页面，为了表示Page1标签链接页面1，可以让当Page1与其他页面的标签字体颜色和背景颜色互换，凸显出页面1是Page1链接的。同理，当页面切换到页面2（3、4）后，Page1标签的字体颜色和背景颜色又换回默认的样式，而链接到切换后的页面的Page2（Page3、Page4）字、背颜色互换。

    header > nav > a.active,header > nav > a.active:hover{color: rgba(104,171,194,1);background-color: rgba(255,255,255,0.9);}header > nav > a:hover{background-color:#4fa2c4;}

通过给当前页面的标签设置类名active来实现字体、背景颜色互换。这里还设置了hover伪类，是当鼠标移动到标签时，背景颜色会比原来亮一些。我们可以看到active:hover这个伪类还是设置成和active一样的样式，表明当前标签不需要这种效果。active类名在不同的页面中表示不同的标签，如在页面1中，Page1的标签设置类名active，其他的标签不设置类名。这样通过控制.active就可以控制当前的Page1标签。因为不同页面的超链接标签表现样式都有相同的规律，所以才设置一个类active，而不是给每个超链接标签都设置一个类名。

二、设置字体库

在HTML5中，提供了@font-face来引用字体文件，而不必将字体库导入到本地中。具体的语法样式为：

    @font-face{font-family: ' 给引用的字体命名';src: url('将下载好的字体文件路径导入');……}

字体文件有.tff、.otf、.eot类型，其中Firefox、Safari、Chrome以及Opera浏览器支持.tff和.otf，而Internet Explorer 9+ 支持.eot类型的字体。

注意：IE 8以及更早的版本不支持@font-face。

三、字体的切换效果

在每个页面下都有四种图片，每张图片都会有相应的文字描述，这个文字描述是在图片层之上，也就是z-inder值比图片层的大。当不同的图片切换时，文字也是在切换的。这里我们用opacity属性由0变到1来实现。具体如下：

section > .Image_Text > h3{position: absolute;width: 100%;left:0;top:50%;text-align: center;color:#fff;opacity:0;-webkit-transition:opacity 0.8s ease-in-out;-moz-transition:opacity 0.8s ease-in-out;-o-transition:opacity 0.8s ease-in-out;transition:opacity 0.8s ease-in-out;}section > .Image_Text > h3 > span:nth-child(1){display:block;font-size:45px;font-family: Arial, Helvetica, sans-serif;letter-spacing: 5px;padding-bottom: 40px;}section > .Image_Text > h3 > span:nth-child(2){display:block;height: 30px;line-height: 30px;background-color:blue;font-size:10px;font-style: italic;
}section > input.Cbuttom1:checked ~  .Image_Text > h3:nth-child(1),
section > input.Cbuttom2:checked ~  .Image_Text > h3:nth-child(2),
section > input.Cbuttom3:checked ~  .Image_Text > h3:nth-child(3),
section > input.Cbuttom4:checked ~  .Image_Text > h3:nth-child(4){opacity: 1;
}

在这里，我可以看到，一开始把文字opacity设置为零，把要显示的文字opacity才设置为1。如果我们没有设置过渡属性的话，那么文字会一瞬间就切换出来，这样就没有切换的效果。因此需要给文字设置transition过渡属性，opacity由1到0或者由0到1的过渡时间为0.8s，过渡方式为ease-in-out。这样文字的切换效果就完成了。

四、图片切换效果

我们的图片切换效果是将每张图片分成四等分，这样我们可以通过控制每一部分的变换方式来实现不同的切换效果。例如我们这里实现的切换效果有，（1）四份都向右滑动切换，（2）四份中的1、3向左滑动而2、4向右滑动，（3）四份中的1、4向外滑动而2、3向里滑动，（4）四份中的1、2、3、4分别往上下左右滑动。

举个例子，假设当前的显示的是图片1，当要切换图片2时，可以使图片2的top由-50px变成0px（假设图片高度为50px），然后配合transition属性来完成切换效果。注意每个div被设置成 overflow:hidden；

其中有一个细节，就是我并没有将一张图片事先裁出等分的四份，而是在每个div中都加载同一张图片，然后利用定位来呈现出一张图片。例如一张图片宽是600px，每一个div宽是150px，则第一个div里的图片backgroun-position:0,让它显示图片宽的前150px，第二个div里的图片backgroun-position:-150px，让它显示图片宽度的150px~300px的内容，同理可以设置第3,4个div里图片的backgroun-position设置为-300px和-450px。这样就能将一张图片完整的呈现出来。

.Image_area div span:nth-child(1){ background:url(../image/Image1.jpg);
}.Image_area div span:nth-child(2){ background:url(../image/Image2.jpg);
}.Image_area div span:nth-child(3){ background:url(../image/Image3.jpg);}.Image_area div span:nth-child(4){ background:url(../image/Image4.jpg);
}.Image_area div:nth-child(1) span{background-position-x: 0;
}
.Image_area div:nth-child(2) span{background-position-x:-150px;
}
.Image_area div:nth-child(3) span{background-position-x:-300px;
}
.Image_area div:nth-child(4) span{background-position-x:-450px;
}

每个部分都向右滑动的切换效果代码：

section > .Image_area  span{position: absolute;width: 100%;height:100%;left: -150px;top: 0;z-index: 2;-webkit-transition: left 0.6s ease-in-out;-moz-transition: left 0.6s ease-in-out;-o-transition: left 0.6s ease-in-out;transition: left 0.6s ease-in-out;
}………………………………section > input.Cbuttom1:checked ~ .Image_area div span:nth-child(1),
section > input.Cbuttom2:checked ~ .Image_area div span:nth-child(2),
section > input.Cbuttom3:checked ~ .Image_area div span:nth-child(3),
section > input.Cbuttom4:checked ~ .Image_area div span:nth-child(4)
{z-index: 10;left:0;-webkit-animation: none;-o-animation: none;-moz-animation: none;animation: none;
}

同理，其他效果的原理和上面的大同小异，读者可以自己尝试着去实现。