CSS實現(xiàn)圖片變小效果

img {
transition: all 0.5s ease-in-out; /* 設置圖片變化平滑和速度 */
}
img:hover {
transform: scale(0.8); /* 圖片縮放0.8倍 */
}

使用CSS可以輕松實現(xiàn)圖片變小的效果。首先，我們需要設置圖片的過渡屬性來讓圖片變化平滑而且有速度。然后，在:hover狀態(tài)下，使用transform屬性對圖片進行縮放，這里我們設置為縮放0.8倍。

需要注意的是，當圖片縮小時，可能存在圖片超出容器的問題。此時，我們可以對圖片所在容器進行設置，使容器可以自動適應縮小后的圖片大小。

通過以上的CSS代碼，就可以輕松實現(xiàn)圖片變小的效果了，讓網站更加生動有趣。