CSS3 背景動畫效果

/* 定義背景圖片 */
body {
background-image: url("background.png");
background-size: cover;
background-repeat: no-repeat;
}
/* 定義動畫關鍵幀 */
@keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}
/* 應用動畫效果 */
body {
animation: move 10s linear infinite;
}

CSS3 中支持多種動畫效果，其中背景動畫效果是一種比較實用的效果。通過動畫效果，可以讓網頁背景產生流動感或變化感，增強了網頁的視覺效果。

在實現該效果時，首先需要定義背景圖片。在本例中，我們使用了名為“background.png”的圖片作為背景。

接著，我們定義了動畫關鍵幀，即“move”。在該關鍵幀中，我們定義了背景位置的變化，從左上角到右上角。其中，“0%”表示起始狀態，“100%”表示結束狀態。

最后，我們通過應用動畫效果讓背景產生了流動感。在本例中，我們應用了“move”動畫，設置動畫時間為“10s”，動畫速度為“linear”，動畫重復次數為“infinite”。

通過以上步驟，我們就成功實現了 CSS3 背景動畫效果。