CSS3頁面動畫是一種非常流行的設計技術，可以使我們的網站變得更加生動、吸引人。今天，我們來學習如何使用CSS3的頁面動畫來展示圖片。

/* HTML代碼 */
<div class="box">
<img src="image.jpg">
</div>
/* CSS代碼 */
.box {
width: 400px;
height: 400px;
overflow: hidden;
position: relative;
}
.box img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}
.box img:hover {
transform: scale(1.2);
transition: all .3s ease-out;
}

以上代碼中，我們首先創建了一個有固定尺寸的盒子，并給予它一個相對定位。接著在這個盒子里面，我們加入了一張圖片，并將它的位置設成絕對定位，同時讓它的上下左右都對齊盒子的邊緣。最后，我們加入了一個:hover偽類，讓圖片在鼠標移到它上面的時候放大，并且加上了一個漸變的過渡效果。

這樣就可以很好的展示圖片了，當然，我們也可以嘗試其它更加酷炫的動畫效果，例如旋轉、縮放、移動、閃爍等等。只要使用CSS3的一些特殊屬性和過渡效果，我們就可以輕松做到這些效果，讓我們的網站變得更加生動，吸引人。