[分享]css中如何实现图片上下循环移动

CSS中可以通过动画实现图片的上下循环移动效果。

img {
  position: absolute;  // 设置绝对定位，使图片可以在一定范围内移动
  animation: moveUpAndDown 5s ease-in-out infinite;  // 设置动画名称，动画时间，运动方式，无限循环
}

@keyframes moveUpAndDown {
  0% {
    transform: translateY(0);  // 图片初始位置在原地，即y轴方向不变
  }
  50% {  
    transform: translateY(-50%);  // 图片上移50%的宽度
  }
  100% {
    transform: translateY(0); // 图片回到初始位置，y轴方向不变
  }
} 

上述代码中，通过设置图像的position属性为absolute，使得图像可以在固定的区域内进行移动。通过设置animation动画的名称、时间和无限循环，就可以实现图像的无限循环移动。通过@keyframes关键字来进行关键帧动画的实现，即在不同的rul中设置图像的transform属性，使得图像在不同的时间点呈现不同的位置和状态，实现图像的上下循环移动。