在網(wǎng)頁設(shè)計中，動畫效果能夠極大地增強用戶體驗，而使用CSS3制作動畫效果，可以讓我們做到自主控制動畫，易于實現(xiàn)，而且不需要JS的介入。

/* 創(chuàng)建一個全屏動畫效果 */
.fullscreen {
width: 100vw;  /* 100%視窗寬度 */
height: 100vh; /* 100%視窗高度 */
position: relative;
}
/* 創(chuàng)建一個收縮動畫的容器 */
.shrink {
transform: scale(0);
transition: all 1s ease;
}
/* 創(chuàng)建一個放大動畫的容器 */
.expand {
transform: scale(1.5);
transition: all 1s ease;
}
/* 讓容器動態(tài)改變大小 */
.fullscreen:hover .shrink {
transform: scale(1);
}
.fullscreen:hover .expand {
transform: scale(2);
}

上面的代碼實現(xiàn)了一個簡單的收縮動畫和放大動畫。將這些代碼應(yīng)用到想要添加動畫效果的HTML對象中即可，例如：

<div class="fullscreen">
<img src="example.jpg" class="shrink expand">
</div>

這段代碼創(chuàng)建了一個全屏容器，并添加了一個圖片對象。圖片對象同時擁有收縮和擴大的功能，當(dāng)鼠標(biāo)懸停在全屏容器上時，圖片對象像拔河比賽一樣收縮和擴大。

以上這個例子只是CSS3動畫效果的冰山一角。CSS3提供了很多強大的動畫效果，例如淡入淡出、旋轉(zhuǎn)、翻轉(zhuǎn)、滑動、旋轉(zhuǎn)等等。敬請嘗試！