CSS背景動態圖在網頁設計中是一種很常見的效果，它能為網頁增加生動性和美感，吸引用戶的注意力。在CSS3中，通過animation、keyframes屬性可以比較簡單地制作出視覺效果非常炫酷的動態背景圖。

那么具體該如何制作呢？下面我們先來看一下CSS代碼：

.background{
animation:bg-gradient 15s ease infinite;
background: linear-gradient(to right, #003366, #00c0ef, #3db3c9, #669999, #00c0ef, #3db3c9, #669999, #003366);
background-size: 1200% auto;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index:-1;
}
@keyframes bg-gradient{
0%{
background-position:0 0;
}
100%{
background-position:1200% 0;
}
}

首先，我們定義一個名為“background”的class，其中animation屬性定義了背景漸變動畫的名稱（bg-gradient）、持續時間（15s）、動畫曲線（ease）和循環次數（infinite）；background屬性定義了背景顏色的漸變方向（to right），以及不同的顏色值；background-size屬性定義了背景圖片的大小，以免圖片不夠大時出現失真。位置屬性（position：absolute）和z-index（-1）則代表將背景的位置固定在網頁中，且在其他元素之后顯示。

接著，我們使用@keyframes屬性定義了動畫幀的開始和結束時的樣式（background-position）。如本例中，開始時坐標為0% 0%，即左上角，結束時為1200% 0%（1200%相當于12倍的頁面寬度），即從左向右無限循環滾動。

最后，在HTML文檔中使用該class即可呈現出動態的背景效果：

<div class="background"></div>

CSS背景動態圖的制作非常靈活多樣，可以根據不同的需求使用不同的漸變方向和顏色，更改漸變時間和循環次數，制造出炫酷而美觀的動態效果，增強網頁的視覺效果和用戶體驗。