[分享]css中如何让图片自动运动

CSS 中有多种方法可以让图片自动运动。其中一种方法是使用动画属性，通过设置不同的关键帧，来让图片在设定的时间内进行运动。 下面是一段示例代码，实现了一个图片向右滑动的动画效果： html { ove...

CSS 中有多种方法可以让图片自动运动。其中一种方法是使用动画属性，通过设置不同的关键帧，来让图片在设定的时间内进行运动。 下面是一段示例代码，实现了一个图片向右滑动的动画效果：

html {
  overflow-x: hidden;
}
.img {
  position: absolute;
  left: 0;
  top: 0;
  animation: rightSlide 5s ease-in-out infinite;
}
@keyframes rightSlide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
} 

在上面的代码中，我们首先设置了 HTML 元素的 `overflow-x` 属性为 `hidden`，这是为了防止滚动条出现。 接着，我们给图片设置了 `position: absolute`，让它脱离文档流，并且使用 `left: 0` 和 `top: 0` 把它放在文档的左上角。 然后，我们使用 `animation` 属性来指定动画的名称、持续时间、缓动函数和重复次数。在这个例子中，动画名称为 `rightSlide`，持续时间为 5 秒，缓动函数为 `ease-in-out`，重复次数为 `infinite` 表示永无止境地循环播放。 最后我们定义了 `rightSlide` 动画的关键帧，从初始状态的 `transform: translateX(0)`，移动到终止状态的 `transform: translateX(100%)`。这个动画就是让图片从左到右滑动的效果。