css中怎样让图片动起来

CSS可以让我们更好地控制网页的呈现，其中一个很酷的特性是可以让图片动起来。下面将为大家介绍两种方法。

/*第一种方法*/
img {
  position: relative;
  animation: moveImage 2s infinite;
}

@keyframes moveImage {
  0% {
    left: 0px;
  }
  50% {
    left: 200px;
  }
  100% {
    left: 0px;
  }
} 

第一种方法使用了CSS动画。我们使用position: relative来使图片可以移动，然后定义了一个叫moveImage的动画。这个动画包含了三个关键帧，分别对应时间轴上0%、50%、100%的位置。在0%的位置图片left为0，也就是不移动。在50%的位置，我们让图片向右移动200像素。在100%的位置，我们把它带回到0像素的位置。我们设置了动画的时间为2秒，并且让它无限循环。

/*第二种方法*/
div {
  background-image: url("example.jpg");
  width: 200px;
  height: 100px;
  position: relative;
  animation: slideImage 5s linear infinite;
}

@keyframes slideImage {
  0% {
    left: 0px;
  }
  50% {
    left: -400px;
  }
  100% {
    left: 0px;
  }
} 

第二种方法使用了CSS的背景图像。我们给一个<div>元素设置了背景图像，然后使用了position: relative将它移到合适的位置。我们定义了一个叫slideImage的动画，同样包含三个关键帧。这次我们使用了linear的时间函数，使得图片平滑地移动。在50%的时候，我们将图片向左移动400像素。在100%时，我们将它带回到原来的位置。我们设置了动画的时间为5秒，并且让它无限循环。

这就是CSS让图片动起来的两种方法。它们都非常容易实现，强大灵活，可以为网页添加令人惊叹的动态特效。我们可以继续探索、描绘、发挥CSS的艺术创造力，丰富我们的网页！