CSS的一個常見特效是當鼠標劃過圖片時，圖片會變大。這種效果可以使用CSS的transform屬性來實現(xiàn)。下面是一些代碼示例，演示如何實現(xiàn)這種效果。

img {
transition: all .2s ease-in-out;
}
img:hover {
transform: scale(1.1);
}

代碼說明：

• 第1行：通過transition屬性定義圖片變化的過渡時間。在這里，變化需要0.2秒的時間，并且采用ease-in-out的緩動函數(shù)。
• 第4行：通過:hover偽類選擇器，定義鼠標移動到圖片上方時，鼠標所指圖片的所有樣式。
• 第5行：通過transform屬性來改變圖片的大小。這里的scale(1.1)使圖片放大了10%。

值得注意的是，當圖片變形時，周圍的CSS布局（如文本流）也會發(fā)生變化。為了避免布局中的因素對過渡動畫的否定影響，建議使用圖片容器。使用容器還能輕松地應對圖片尺寸的變化，而不用對每張圖片都單獨寫CSS。

.container {
position: relative;
display: inline-block;
}
.container:hover img {
transform: scale(1.1);
}
.container img {
transition: all .2s ease-in-out;
}

代碼說明：

• 第1行：定義圖片容器為相對定位和inline-block的元素。
• 第4行：通過:hover選擇器，定義鼠標移動到容器上時，容器中的所有圖片的樣式。
• 第7行：定義圖片在容器中的變化過渡效果。

總結(jié)：

• 使用transform和:hover，可以輕松地實現(xiàn)圖片放大的效果。
• 使用圖片容器來限制變形影響，并簡化CSS。
• 通過transition屬性，可以微調(diào)動畫的速度和行為。