CSS3讓我們可以為網(wǎng)頁添加各種動畫效果，其中一個常見的是讓div飛入頁面。下面我們來學習如何使用CSS3實現(xiàn)這個效果。

/*首先，先設置要飛入的div的起始位置*/
.flying {
position: relative;
left:-500px; /*將div左移500px，使其超出頁面范圍*/
}
/*設置動畫*/
.flying {
animation: flyin 1s ease-in-out forwards;
}
/*定義動畫*/
@keyframes flyin {
0% {
left: -500px;
opacity: 0; /*開始時div透明度為0*/
}
100% {
left: 0;
opacity: 1; /*結束時div透明度為1*/
}
}

以上代碼中，我們首先給要執(zhí)行動畫的div設置了一個初始位置（left:-500px），使其在頁面范圍之外，接著我們使用CSS3動畫屬性animation，在1秒內(nèi)讓div從左側移動到頁面中央，并設置了緩入緩出效果（ease-in-out）和保持動畫結束狀態(tài)（forwards）。最后，我們定義了動畫效果的關鍵幀，其中0%的位置是div在起始位置，并且透明度為0，100%的位置是div到達頁面中央，并且透明度為1。如此一來，方才我們就實現(xiàn)了div飛入頁面的效果。