CSS3有很多強大的效果，其中之一就是滑動輪播。滑動輪播可以使你的網頁看起來更加有吸引力和交互性。下面我們來看看如何使用CSS3來創建滑動輪播。

/* 創建一個容器 */
.slider {
width: 100%; /* 設置寬度 */
overflow: hidden; /* 設置溢出隱藏 */
}
/* 創建一個滑動框 */
.slider-box {
display: flex; /* 設置為flex布局 */
width: 300%; /* 設置寬度 */
transition: transform 0.5s ease; /* 設置過渡效果 */
}
/* 創建每個輪播項 */
.slider-item {
flex-grow: 1; /* 設置彈性增長 */
width: 33.33%; /* 設置寬度 */
}
/* 創建輪播指示器 */
.slider-indicator {
text-align: center; /* 設置文本居中 */
}
/* 激活狀態的輪播指示器 */
.slider-indicator .active {
color: red; /* 設置紅色 */
}

上面的代碼中，我們定義了一個包含四個輪播項的滑動框。我們使用了flex布局，并在每個輪播項上設置了彈性增長和寬度。我們還定義了一個輪播指示器，用于指示當前輪播項。該指示器是一個文本居中的div，包含四個單擊元素，以及默認的激活狀態。

// JS代碼
var sliderBox = document.querySelector('.slider-box'); // 獲取滑動框
setInterval(function() {
// 向左滑動一個輪播項
sliderBox.style.transform = 'translateX(-33.33%)';
setTimeout(function() {
// 把第一個輪播項添加到末尾
sliderBox.appendChild(sliderBox.firstChild);
sliderBox.style.transform = ''; // 重置滑動框位置
}, 500);
}, 3000);

上面的JS代碼使用setInterval函數來定時滑動輪播。我們使用了translateX函數來將滑動框向左移動一個輪播項的距離，然后使用setTimeout函數在500毫秒后將第一個輪播項添加到末尾。最后我們重置了滑動框的位置。這樣就可以實現無限循環的滑動輪播了。