CSS是網頁設計和開發中的重要組成部分，它可以讓頁面變得更加美觀和互動。其中一種很有用的特性是鼠標滾動縮放圖片。通過添加一些簡單的CSS代碼，我們可以給網頁添加一個新的維度，讓用戶可以通過簡單的手勢來交互。

/* 在CSS中使用鼠標滾輪縮放圖片*/
img {
width: 100%;
max-width: 500px;
transition: 0.5s ease-out;
}
img:hover {
transform: scale(1.2);
transition: 0.5s ease-in;
}
/* 縮小圖片時，禁止其小于原始大小 */
@media only screen and (max-width: 1200px) {
img {
max-width: 100%;
}
}
/*在上述CSS中，我們定義了一個圖像元素的基本樣式。我們還為其懸停樣式添加了一個“放大”轉換。transform屬性的scale（）函數通過指定縮放因子增大或減小元素。因此，當用戶懸停在圖像上時，它將以1.2倍的比例顯示。*/

通過添加這些CSS，我們可以使圖像變得更具互動性，而不僅僅是呈現靜態圖像。鼠標滾動縮放圖片是一個簡單但非常有用的特性，它可以讓用戶更深入地了解頁面內容，從而提高其剩余時間。在今天的網頁設計和開發中，互動性非常受歡迎，因此這種技術可以為您的網頁增加吸引力。如果您還沒有將其添加到您的網頁中，我會建議您嘗試一下。