在網頁設計中，圖片的使用是不可或缺的。我們可以通過CSS使圖片飛入網頁，讓網頁看起來更加動態。

img{
position: absolute;
top: -200px;
left: 50%;
transform: translate(-50%);
/*變換中心點為水平居中*/
animation: flying 2s ease-in-out forwards;
/*調用動畫*/
}
@keyframes flying{
0%{
opacity: 0;
transform: translate(-50%) rotate(0deg);
/*使用rotate旋轉圖片*/
}
50%{
opacity: 1;
transform: translate(-50%, 500px) rotate(180deg);
}
100%{
opacity: 1;
transform: translate(-50%, 200px) rotate(360deg);
}
}

首先，我們設置圖片為絕對定位。并將它的位置設置在屏幕的外面。

然后，我們使用transform屬性使圖片水平居中。animation屬性調用動畫。

動畫使用@keyframes關鍵字定義。在動畫過程中，我們使用opacity屬性使圖片逐漸出現。同時使用transform將圖片從上方飛入。最后加入一個旋轉的變換，讓圖片在飛入的過程中產生旋轉的效果。

通過以上的CSS代碼，我們就可以讓圖片飛入網頁了。不同的動畫效果可以通過調整@keyframes來實現，設計出更加豐富的網頁效果。