CSS3切換圖片輪播可以讓網站頁面變得更加生動，讓用戶感受到不同的視覺效果。以下是一個名為“slider”的CSS3切換圖片輪播的代碼示例：

.slider {
width: 100%;
height: 500px;
position: relative;
overflow: hidden;
}
.slider img {
width: 100%;
height: 100%;
position: absolute;
transition: opacity 1s ease-in-out;
}
.slider img:first-child {
opacity: 1;
}
.slider img:last-child {
opacity: 0;
}
.slider img.active {
opacity: 1;
}
.slider-control {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
.slider-control button {
background-color: #ffffff;
border: none;
border-radius: 50%;
width: 10px;
height: 10px;
margin: 0 5px;
cursor: pointer;
outline: none;
}
.slider-control button.active {
background-color: #000000;
}
.slider-prev,
.slider-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: transparent;
border: none;
outline: none;
font-size: 50px;
color: #ffffff;
cursor: pointer;
}
.slider-prev {
left: 20px;
}
.slider-next {
right: 20px;
}

使用這個代碼示例，您可以在自己的網站上創建一個CSS3切換圖片輪播。您可以改變輪播圖片的大小、輪播寬度和高度以及控制按鈕的形狀和樣式。您還可以自定義輪播圖片的數量和切換時間。