CSS背景图动画可以让网页设计更加生动、有趣，并且能够吸引用户的注意力。下面介绍一些常用的CSS背景图动画：
/* 1. 淡入淡出 */
div {
background-image: url(bg.jpg);
animation: fade 2s infinite;
}
@keyframes fade {
from {
opacity: 1;
}
to {
opacity: 0.5;
}
}
/* 2. 从左往右滑动 */
div {
background-image: url(bg.jpg);
animation: slide 2s infinite;
}
@keyframes slide {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
}
}
/* 3. 从上往下滑动 */
div {
background-image: url(bg.jpg);
animation: slide 2s infinite;
}
@keyframes slide {
from {
background-position: 0 0;
}
to {
background-position: 0 100%;
}
}
/* 4. 旋转 */
div {
background-image: url(bg.jpg);
animation: rotate 2s infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
以上几种常用的CSS背景图动画，可以根据需要进行调整，让网页更加生动、个性化，吸引用户的注意力。
