CSS3滑動Tab是一種常用的網頁布局效果，可以通過CSS3的一些特性來實現。下面介紹一下如何用CSS3來實現滑動Tab。
首先，在HTML頁面中創建基礎結構，使用`
- `標簽來創建選項卡，然后使用`
`標簽來創建選項卡內容的容器。以下是代碼。
```然后在CSS中創建樣式。首先，需要為選項卡創建樣式。以下是選項卡樣式的代碼。
```
Section 1
This is section 1 content.
Section 2
This is section 2 content.
Section 3
This is section 3 content.
Section 4
This is section 4 content.
.tab {
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.tab li {
float: left;
margin: 0 10px 0 0;
}
.tab a {
display: block;
width: auto;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #f2f2f2;
color: #444;
padding: 0 15px;
text-decoration: none;
border-radius: 5px 5px 0 0;
border: 1px solid #ccc;
}
.tab a.active {
background-color: #fff;
color: #000;
border-bottom-color: transparent;
}
.tab-content {
clear: both;
border: 1px solid #ccc;
border-top: none;
padding: 10px;
}接下來，需要為選項卡的內容創建樣式。以下是選項卡內容的樣式代碼。
```.tab-content .tab-pane {
display: none;
padding: 10px;
}
.tab-content .active {
display: block;
-webkit-animation: slide 0.5s ease 0s 1 normal forwards;
animation: slide 0.5s ease 0s 1 normal forwards;
}
@-webkit-keyframes slide {
from {
-webkit-transform: translateX(100%);
transform: translateX(100%);
opacity: 0;
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide {
from {
-webkit-transform: translateX(100%);
transform: translateX(100%);
opacity: 0;
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}最后，在JS中為選項卡綁定單擊事件，使之在點擊選項卡時，對應的內容能夠顯示在頁面上。以下是JS代碼。
```$(document).ready(function() {
$('.tab a').click(function(e) {
e.preventDefault();
var tabId = $(this).attr('href');
$('.tab a').removeClass('active');
$(this).addClass('active');
$('.tab-content .tab-pane').removeClass('active');
$(tabId).addClass('active');
});
});這就是用CSS3來創建滑動Tab的總體方法。你可以根據自己的需要調整CSS樣式，使之符合你的網站風格。