CSS 寫輪播圖是現代網站開發中非常重要的一個技能，它可以展示豐富多彩的內容，吸引訪客的注意力。下面我們將用 pre 標簽來展示如何使用 CSS 寫出一個簡潔的輪播圖。

/* 添加輪播圖的容器 */
.slider {
width: 100%;
height: 400px;
position: relative;
overflow: hidden;
}
/* 添加每張圖片的樣式 */
.slider img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 0.5s ease-in-out;
}
/* 添加圖片序號的樣式 */
.slide-number {
position: absolute;
bottom: 20px;
right: 20px;
color: white;
font-size: 24px;
font-weight: 600;
}
/* 完成輪播圖的動畫效果 */
.slider input:checked + img {
transform: scale(1.1);
z-index: 1000;
}
/* 添加輪播圖的控制按鈕 */
.slide-controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.slide-controls label {
width: 20px;
height: 20px;
margin: 0 10px;
border-radius: 50%;
background: white;
cursor: pointer;
}
/* 當前選中的按鈕變成藍色 */
.slider input:checked + .slide-controls label {
background: dodgerblue;
}

這段代碼中，我們首先創建了一個名為 "slider" 的容器來承載輪播圖。然后，我們為每張圖片定義了樣式，并添加序號和控制按鈕。最后，在 CSS 中添加了動畫效果和按鈕樣式。

當訪客點擊輪播圖控制按鈕時，相應的圖片將出現在輪播區域中。圖片使用 scale 屬性動態縮放，給訪客帶來更豐富的視覺體驗。

使用 CSS 寫輪播圖非常簡單，只需要使用一些基本的 CSS 屬性和選擇器，就可以創建出一個美觀、實用的輪播圖。讓我們開始構建你自己的輪播圖吧！