CSS常見背景動畫 在Web開發中，CSS是一個極其重要的部分。其中，背景動畫的使用尤為常見。接下來，我們將介紹CSS常見的背景動畫樣式。 1. 漸變動畫 由于CSS中的線性漸變功能，您可以創建一個平滑的顏色漸變。要創建漸變動畫，您需要使用@keyframes規則和CSS3的transition屬性。下面是一個例子：

p {
background: linear-gradient(45deg, #ff4d4d, #ff3f7f, #ff1eb2);
background-size: 400% 400%;
animation: gradientBg 8s ease infinite;
}
@keyframes gradientBg {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

在上面的代碼中，“gradientBg”是該動畫的名稱，過渡時間為8秒。漸變的起始位置是50%，并且顏色在50%和100%之間變化。此樣式將背景設置為從左上角順時針旋轉45度，同時顏色變化。 2. 圖片滾動動畫 如果您想使背景圖片動起來，可以使用類似下面的CSS：

p {
background-image: url(bg.png);
background-size: cover;
animation: scrollBg 10s linear infinite;
}
@keyframes scrollBg {
0% {
background-position: 0% 0%;
}
100% {
background-position: 100% 100%;
}
}

在這個例子中，“scrollBg”是動畫的名稱，過渡時間為10秒，并且將背景設置為圖片。該動畫呈現了圖片從左上角慢慢向右下角滾動的效果。 3. 漸隱漸顯動畫 要創建漸隱漸顯背景動畫，您可以使用CSS3中的opacity屬性。下面是一個例子：

p {
background: #fff;
animation: fadeInOutBg 5s linear infinite;
}
@keyframes fadeInOutBg {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}

漸隱漸顯動畫是通過在50%的時候將透明度減半來實現的。此樣式將背景設置為白色，并在5秒鐘內漸隱漸顯，以無限循環。 以上是CSS常見背景動畫的介紹。借助這些動畫，您可以使您的網站更具吸引力，從而吸引更多的用戶。