CSS可以用來實現手動切換圖，這給網頁設計師帶來了很大的方便和創意，下面我們來介紹一下如何使用CSS來手動切換圖。

HTML代碼：
<div class="slider">
<img src="img1.png" alt="Image 1">
<img src="img2.png" alt="Image 2">
<img src="img3.png" alt="Image 3">
</div>
CSS代碼：
.slider{
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
}
.slider img{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in;
}
.slider img:first-child{
opacity: 1;
}
.slider input[type="radio"]{
position: absolute;
z-index: 100;
opacity: 0;
width: 10px;
height: 10px;
margin-top: -5px;
margin-left: -5px;
cursor: pointer;
}
.slider input[type="radio"]:checked + img{
opacity: 1;
}

首先，我們在HTML代碼中定義了一個div元素，class為slider。在這個slider元素中，包含了三個img元素，分別是三張圖片。接下來，我們用CSS來實現手動切換圖片的效果。

在CSS代碼中，我們首先給slider元素進行了一些基本的樣式定義，包括設置了寬度、高度、相對定位和居中等屬性。接著，對所有img元素進行了一些樣式定義，包括絕對定位、透明度為0、以及使用transition屬性實現了漸變效果。

接下來的CSS代碼中，我們使用了:first-child選擇器來設置第一張圖片的透明度為1。此外，為了實現手動切換功能，我們在HTML代碼中使用了input元素，并將其類型設置為radio。此外，我們使用了+:選擇器來選中每個radio元素后面的img元素，并在:checked狀態下將其透明度設置為1，這樣就實現了圖片的手動切換效果。

綜上所述，以上就是使用CSS手動切換圖的實現過程，大家可以根據自己的需要來進行實踐和探索。