CSS3可以實現很多有趣的效果，其中之一就是鼠標滑過圖片時自動縮小。這是怎樣實現的呢？

.img{
width: 300px;
height: 200px;
transition: all 0.3s ease-out;
}
.img:hover{
transform: scale(0.8);
}

上述代碼中，我們先定義了一個名為“img”的class，寬度為300px，高度為200px，同時設置了一個過渡效果，時間為0.3秒，并且過渡效果緩動方式為“ease-out”。

接下來，我們在“img:hover”偽類中，設置了一個“transform: scale(0.8)”的屬性。這個屬性的意思是，當鼠標滑過圖片時，讓圖片的大小縮小到原來的0.8倍。

通過這兩段代碼的組合，我們就實現了鼠標滑過圖片時的縮小效果。

當然，我們也可以根據實際需求，調整過渡時間或縮小比例，來達到不同的效果。例如下面的代碼，可以讓圖片縮小到原來的0.5倍：

.img{
width: 300px;
height: 200px;
transition: all 0.5s ease-out;
}
.img:hover{
transform: scale(0.5);
}

通過這么簡單的CSS代碼，我們就能夠實現有趣的圖片縮小效果，更好地為我們的頁面增添趣味和美感。