CSS可以用來實現(xiàn)很多炫酷的效果，比如圖片自動逐漸放大。下面我們來看看如何使用CSS實現(xiàn)這個效果。

.image {
width: 200px;
height: 200px;
background-size: cover;
background-position: center;
transition: transform 0.5s ease-in-out;
}
.image:hover {
transform: scale(1.1);
}

首先，我們需要寫一個class來定義我們的圖片樣式。我們使用一個200x200的大小作為示例。background-size設(shè)置為“cover”以保持圖片的比例，同時背景定位設(shè)為“center”以將圖像垂直和水平居中。我們使用CSS過渡屬性來平滑過渡縮放時的變換效果。

接下來，在hover狀態(tài)下我們會給圖片一個scale變換，把它放大1.1倍。由于我們設(shè)置過渡屬性為0.5秒，并且給定了緩動效果，這個過程就會以動畫的形式平緩過渡。

現(xiàn)在，我們的CSS部分就完成了。接下來我們只需要將這個class應(yīng)用到想要實現(xiàn)這個效果的圖片上。例如：

<img class="image" src="yourimage.jpg">

使用這段CSS代碼，你就可以讓你的圖片逐漸放大了！