對于網(wǎng)頁設計師來說，CSS動畫是展現(xiàn)出色的關鍵之一。其中之一的功能是放大縮小效果。我們將在本文中學習如何使用CSS制作動畫效果，讓你的網(wǎng)頁更加生動有趣。

首先，我們需要定義CSS樣式，為動畫效果做鋪墊。放大縮小動畫基于類文獻，使用偽樣式選擇器（:hover）實現(xiàn)。以下示例中讓我們定義一組樣式表，創(chuàng)建一個放大縮小小鼠標懸停在其上時：

.zoom {
transition: transform .2s;
/*給元素添加transition*/
margin: 0 auto;
width: 200px;
height: 200px;
background-size: cover;
}
.zoom:hover {
transform: scale(1.2);
/*對于偽樣式:hover進行動畫變換*/
}

如上所示，我們創(chuàng)建了一個新類名為.zoom。transition屬性指定了動畫的時間為0.2秒，并且定義了3個其他屬性：外邊距、寬度和高度。請注意，我們使用背景圖像而不是圖像標簽。

當我們鼠標懸停在.zoom元素上時，我們會應用:hover偽類樣式規(guī)則。這里是：我們使用CSS transform屬性來放大元素，將其縮放計數(shù)器值1.2倍。

我們可以為每個元素單獨創(chuàng)建類似的樣式。這些樣式首先可以作為通用樣式的一部分定義，并在網(wǎng)頁中適當使用。通過使用CSS屬性集，Web開發(fā)人員無需為每個項目定義單獨的樣式類。

放大縮小動畫效果是一種很棒的方式來增加動態(tài)元素。要讓下一個Web項目脫穎而出，請記住使用這種技術。