css怎么让背景图移动 |css分类菜单样式

//首先，大家需要设置背景图片
body {
background-image: url('image.jpeg');
background-repeat: no-repeat;
background-size: cover;
}
//然后，大家可以使用CSS3中的animation属性来使背景图移动。
//下面的例子中，将背景图水平向左移动150px，垂直方向不动，持续时间为3秒，无限循环。
body {
animation: moveBg 3s infinite;
}
@keyframes moveBg {
from { background-position: 0 0; }
to { background-position: -150px 0; }
}

如上代码中，大家首先设置了背景图，并使其不重复，自适应屏幕大小。然后使用animation属性来控制动画。通过定义关键帧moveBg来规定背景图的变化范围，从初始位置0 0开始，到水平方向移动150px。最后，将动画持续时间设为3秒，使其无限循环。

当然，大家也可以在背景图没有定义的HTML元素上使用background-image属性设置背景图片。下面是一个例子，将图片移动到右下角，持续时间为5秒：

div {
width: 300px;
height: 300px;
background-image: url('image.jpeg');
background-repeat: no-repeat;
background-size: cover;
animation: moveBg2 5s infinite;
}
@keyframes moveBg2 {
from { background-position: center; }
to { background-position: right bottom; }
}

总之，通过使用animation属性和keyframes关键帧，大家可以轻松地控制背景图的移动和变化，使网页更加生动、美观。