CSS3動(dòng)畫背景是指利用CSS3技術(shù)實(shí)現(xiàn)動(dòng)態(tài)背景效果。傳統(tǒng)的背景都是固定靜態(tài)的，但是在Web設(shè)計(jì)中，我們可以通過CSS3技術(shù)讓網(wǎng)站背景變得更加生動(dòng)。下面介紹一些CSS3動(dòng)畫背景效果。

1. 漸變背景

background: linear-gradient(to bottom, #ffffff, #000000);

這個(gè)代碼實(shí)現(xiàn)了一個(gè)從上到下的漸變效果，首先，我們?cè)O(shè)置了漸變的方向?yàn)閺纳系较隆Ｈ缓螅覀冊(cè)O(shè)置漸變的起始顏色和結(jié)束顏色，這里是白色到黑色。

2. 背景圖片縮放

.background-img {
background-image: url('bg.jpg');
background-repeat: no-repeat;
background-size: cover;
animation: scale 10s infinite alternate;
}
@keyframes scale {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}

這個(gè)代碼實(shí)現(xiàn)了一個(gè)背景圖片縮放的效果。首先，我們?cè)O(shè)置了背景圖片為'bg.jpg'。然后，我們?cè)O(shè)置了背景圖片不重復(fù)并填滿整個(gè)背景空間。接下來，我們創(chuàng)建了一個(gè)縮放動(dòng)畫，該動(dòng)畫會(huì)不斷重復(fù)，并在每次循環(huán)周期內(nèi)輪流更改縮放比例。

3. 徑向漸變動(dòng)畫

.background-gradient {
background: radial-gradient(circle, #ffffff, #000000);
animation: gradient 10s infinite alternate;
}
@keyframes gradient {
0% {
background-position: 0% 0%;
background-size: 150% 150%;
}
100% {
background-position: 100% 100%;
background-size: 200% 200%;
}
}

這個(gè)代碼實(shí)現(xiàn)了一個(gè)徑向漸變動(dòng)畫效果。首先，我們創(chuàng)建了一個(gè)徑向漸變，圓心在中心，從白色到黑色。然后，我們創(chuàng)建了一個(gè)動(dòng)畫，該動(dòng)畫會(huì)不斷重復(fù)，并在每次循環(huán)周期內(nèi)輪流改變背景位置和大小來實(shí)現(xiàn)動(dòng)態(tài)效果。