.gif{
  position: absolute;
  height: auto;
}
#gif-1 {
  top: 50em;
  right: 12em;
  width: 50px;
}
#gif-2 {
  top: 40em;
  left: 13em;
  width: 50px;
}
#gif-3 {
  top: 12em;
  left: 20em;
  width: 50px;
}
#gif-4 {
  top: 30em;
  right: 12em;
  width: 50px;
}
#gif-5 {
  top: 30em;
  right: 13em;
  width: 50px;
}
#gif-6 {
  top: 35em;
  right: 13em;
  width: 100px;
}
#gif-7 {
  top: 30em;
  right: 12em;
  width: 50px;
}

/* 覆盖层，保证在最上方，不阻碍底层交互 */
#scroll-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 9999;
}

/* 通用滚动图片样式 */
.scroll-img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 100%;                    /* 起点：画面右侧外 */
  animation-name: scroll-left;   /* 使用相同的关键帧 */
  animation-timing-function: linear;
  animation-iteration-count: infinite;  /* 无限循环 */
}

/* 第一张：20s 滑完一次，立即重头再来 */
.scroll-img-1 {
  animation-duration: 20s;       /* 20 秒完成一次 */
  animation-delay: 0s;           /* 立即开始 */
}

/* 第二张：30s 滑完一次，首次延迟 2s 再开始 */
.scroll-img-2 {
  animation-duration: 40s;       /* 30 秒完成一次 */
  animation-delay: 2s;           /* 首次延迟两秒 */
}

/* 关键帧：从 right 外完全滑到 left 外 */
@keyframes scroll-left {
  from { left: 100%;   }
  to   { left: -100%;  }
}