CSS中，我們可以使用圖片的切換效果來增強頁面的互動性，提升用戶體驗。下面我們就來介紹一些圖片切換效果的實現方法。

/* 圖片切換效果1：鼠標懸浮顯示不同圖片 */
#img-hover {
background-image: url('pic1.jpg');
width: 200px;
height: 200px;
}
#img-hover:hover {
background-image: url('pic2.jpg');
}
/* 圖片切換效果2：定時切換多張圖片 */
#img-auto {
background-image: url('pic1.jpg');
width: 200px;
height: 200px;
animation: imgauto 6s infinite;
}
@keyframes imgauto {
0% {
background-image: url('pic1.jpg');
}
33% {
background-image: url('pic2.jpg');
}
66% {
background-image: url('pic3.jpg');
}
100% {
background-image: url('pic1.jpg');
}
}
/* 圖片切換效果3：點擊切換不同圖片 */
#img-click {
background-image: url('pic1.jpg');
width: 200px;
height: 200px;
cursor: pointer;
}
#img-click:active {
background-image: url('pic2.jpg');
}

以上是三種簡單的圖片切換效果，可以通過CSS輕松實現。其中最常用的是第一種方式，鼠標懸浮效果，常用于動態展示商品圖片等。第二種方式則是用于輪播圖的實現，通過設置不同背景圖片和動畫時間，定時切換不同的圖片。最后，第三種方式通過添加光標樣式，實現簡單的點擊切換效果。