css 动画背景图片

CSS动画背景图片的作用是可以为网页增加动态性，使网页更具有吸引力。以下是CSS动画背景图片的相关代码：

background-image: url('picture.jpg');
animation: animateBg 10s infinite linear;

@keyframes animateBg {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

以上代码中，background-image指定了要使用的背景图片，animation指定了动画效果。其中，animateBg是动画名称，10s指动画时间（秒），infinite指动画无限循环，linear指动画速度线性匀速。

接着，@keyframes定义了动画关键帧，即动画的起始点、中间点和终止点。在这里，动画方式是把背景图片从左侧平滑地移动到右侧，再平滑移回左侧，不断循环。

我们可以修改代码中的数值来改变动画的速度、方向和运动轨迹，以满足不同的设计需求。