animation 横向走马灯效果

动画中的横向走马灯效果，通常是指一种逐帧展示图片序列，让图片看起来像在水平方向连续移动的效果，给人一种循环滚动的感觉。这种效果常用于网页设计、GUI界面或者简单的动画演示中。实现这一效果，可以采用CSS的`animation`属性或者JavaScript的定时器和DOM操作，通过控制每张图片的显示和隐藏时间，模拟出不断前进的效果。常见的做法是设置动画持续时间和间隔，然后改变图片元素的`left`属性值使其沿x轴移动。

例如，在CSS中，你可以这样做：

.slide {
  position: relative;
  width: 500px; /* 图片宽度 */
  height: 300px; /* 图片高度 */
  overflow: hidden;
}

.slide img {
  display: none;
  animation: slideShow 8s linear infinite; /* 设置动画持续时间，步进函数和无限循环 */
}

@keyframes slideShow {
  0% { left: 0; }
  100% { left: -500px; } /* 总宽度等于图片宽度，达到尽头后回到初始位置 */
}

在这个例子中，图片会在每8秒完成一次从左到右再到左的往返移动。