CSS3作為最新的Web技術之一，在圖文切換上也有了很大的發展。今天，我們就來介紹一下CSS3炫酷圖文切換。

/*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炫酷圖文切換，不僅可以增加頁面的視覺效果，還能夠輕松地實現圖文聯動的效果，讓頁面更加生動、精彩。