CSS背景動(dòng)態(tài)圖在網(wǎng)頁(yè)設(shè)計(jì)中是一種很常見的效果，它能為網(wǎng)頁(yè)增加生動(dòng)性和美感，吸引用戶的注意力。在CSS3中，通過(guò)animation、keyframes屬性可以比較簡(jiǎn)單地制作出視覺效果非常炫酷的動(dòng)態(tài)背景圖。

那么具體該如何制作呢？下面我們先來(lái)看一下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;
}
}

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

接著，我們使用@keyframes屬性定義了動(dòng)畫幀的開始和結(jié)束時(shí)的樣式（background-position）。如本例中，開始時(shí)坐標(biāo)為0% 0%，即左上角，結(jié)束時(shí)為1200% 0%（1200%相當(dāng)于12倍的頁(yè)面寬度），即從左向右無(wú)限循環(huán)滾動(dòng)。

最后，在HTML文檔中使用該class即可呈現(xiàn)出動(dòng)態(tài)的背景效果：

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

CSS背景動(dòng)態(tài)圖的制作非常靈活多樣，可以根據(jù)不同的需求使用不同的漸變方向和顏色，更改漸變時(shí)間和循環(huán)次數(shù)，制造出炫酷而美觀的動(dòng)態(tài)效果，增強(qiáng)網(wǎng)頁(yè)的視覺效果和用戶體驗(yàn)。