css将一个图片移动

CSS可以帮助我们实现很多动态效果，比如移动图片。下面我们来看一下如何使用CSS将一个图片移动起来。

  <style>
    /* 定义一个类名，用于指定要移动的图片 */
    .move {
      position: relative; /* 相对定位 */
      left: 0; /* 初始位置 */
      animation: move-linear 2s infinite; /* 调用动画效果 */
    }
    /* 定义动画效果 */
    @keyframes move-linear {
      0% {
        left: 0; /* 初始位置 */
      }
      50% {
        left: 50%; /* 移动到屏幕中间 */
      }
      100% {
        left: 0; /* 回到初始位置 */
      }
    }
  </style>

  <img class="move" src="图片地址" />

上面的代码中，我们定义了一个类名为“move”，并指定了它的初始位置为0。然后，我们使用CSS3的动画效果，定义了一个名为“move-linear”的动画，并在类名“move”上调用它。

动画效果的核心是定义了一个从0%到100%的过程，其中包含三个关键帧：0%、50%和100%。在每个关键帧中，我们对图片的位置进行了不同的设定，从而使它移动起来。

最后，我们只需要将要移动的图片添加类名“move”即可。