在網頁設計中，輪播圖是一種十分常見的組件，它可以展示多張圖片或者其他類型的內容，并且可以搭配各種動畫效果來增加頁面的交互性和美觀性。一般來說，我們可以通過 JavaScript 來實現(xiàn)輪播效果，但是今天我們要介紹的是一種純 CSS 的有焦點輪播。

// HTML 結構
<div class="slider">
<div class="slides">
<img src="img/img1.png" alt="image1">
<img src="img/img2.png" alt="image2">
<img src="img/img3.png" alt="image3">
<img src="img/img4.png" alt="image4">
</div>
<div class="dots">
<span class="dot active"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
// CSS 樣式
.slider {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.slides {
position: absolute;
top: 0;
left: 0;
width: 400%;
height: 100%;
display: flex;
transition: transform 0.5s ease-in-out;
}
.slides img {
width: 25%;
height: 100%;
}
.dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.dot {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 10px;
background-color: #ccc;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.5s ease-in-out;
}
.dot.active {
background-color: #000;
}

首先，我們需要將輪播圖的容器（.slider）設置為相對定位，同時固定寬度和高度，并且將其超出部分隱藏起來。然后，將輪播圖片的容器（.slides）設置為絕對定位，并且使用 flex 布局將其中的圖片橫向排列。接下來，我們需要給圖片容器添加一個 transform 屬性，來控制它的位置以達到輪播效果。最后，我們在容器底部添加了一個小圓點（.dot）容器，用來表示當前圖片的位置，同時給其中的一個圓點添加了 active 類名來表示當前選中的圖片。

通過以上 CSS 代碼，我們實現(xiàn)了一個簡單的有焦點的輪播效果，而不需要用到 JavaScript。這種純 CSS 的輪播可以減少頁面的請求次數，從而提高頁面性能，同時也可以更加方便地實現(xiàn)各種樣式和動畫效果。我們可以通過修改樣式來改變動畫方式、顏色、大小等等，完全自定義你的輪播效果。歡迎嘗試！