css 图片动画左右移动

在编写网页时，添加图片动画可以使页面更加丰富有趣。其中，图片左右移动的动画效果是常见且简单的一种。下面就给大家介绍一下如何利用CSS实现图片左右移动的动画效果。

img {
  position: relative; /* 使图片位置可调整 */
  animation: move 2s ease-in-out infinite; /* 调用动画move，2s一次，缓和效果，无限次循环 */
}

@keyframes move {
  0% {
    left: 0; /* 起始位置在左边 */
  }
  50% {
    left: 50%; /* 移动到中间 */
  }
  100% {
    left: 100%; /* 移动到右边 */
  }
}

通过以上代码，我们可以实现图片在页面左右移动的动画效果。下面我们就一步步分析其中的原理。

首先，我们需要为图片添加样式。这里使用相对定位（position: relative）使图片位置可调整。然后，我们需要调用CSS动画（animation）来实现动画效果。其中，我们使用move作为动画名，2s表示每2秒执行一次，ease-in-out是缓和效果，infinite表示无限循环。

然后，我们在@keyframes中定义动画效果的几个阶段。0%表示起始状态，50%表示移动到中间位置，100%表示移动到右边位置。其中，通过调整left属性的值实现图片位置的调整。

通过以上设置，我们就可以在网页中实现图片左右移动的效果啦！