css3炫酷图文切换 |css combined shape

/*CSS代码开始*/
.img-box{
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
}
.img-box img{
position: absolute;
left: 0;
top: 0;
opacity: 0; /*图片初始状态为隐藏*/
transition: all 1s; /*过渡动画，时间为1s*/
}
.img-box img.active{
opacity: 1; /*选中图片为显示状态*/
}
.text-box{
position: absolute;
left: 0;
right: 0;
bottom: 0;
text-align: center;
font-size: 24px;
color: #fff;
opacity: 0; /*文字初始状态为隐藏*/
transition: all 1s; /*过渡动画，时间为1s*/
}
.text-box.active{
opacity: 1; /*选中文字为显示状态*/
}
/*CSS代码结束*/

上面的CSS代码是图文切换的主要代码，大家来分解一下：

• 首先是.img-box的样式，它是整个框架的容器，宽度和高度是预设的，overflow为hidden，表示溢出部分将被剪切。
• .img-box img表示图片，每张图片都是绝对定位，左上角的位置为0，opacity为0，即不显示。
• .img-box img.active表示选中的图片，opacity为1，即显示。
• 接下来是.text-box的样式，它是用于容纳文字的框架，也是绝对定位，left、right、bottom都为0，表示位于容器的底部中间，text-align:center表示文字居中，font-size和color为默认值。
• .text-box.active表示选中的文字，opacity为1，即显示。
• 最后是过渡动画，当图片或文字状态发生变化时，会自动产生动画效果，时间为1s。

在HTML代码里，大家需要添加以下内容：

<div class="img-box">
<img class="active" src="xxx.jpg" alt="">
<img src="xxx.jpg" alt="">
<img src="xxx.jpg" alt="">
<div class="text-box active">标题1</div>
<div class="text-box">标题2</div>
<div class="text-box">标题3</div>
</div>

这里添加了三张图片和三个标题，其中每个.img-box img对应一个.text-box，而设置.class=”active”的.img-box img和.text-box则对应展示的图片和标题。

最终效果如下：

通过CSS3炫酷图文切换，不仅可以增加页面的视觉效果，还能够轻松地实现图文联动的效果，让页面更加生动、精彩。