Блог

Главная - Вопросы по программированию - Проблема: получение эффекта бесшовного выделения с img для работы, но он перезапускается видимым образом

Проблема: получение эффекта бесшовного выделения с img для работы, но он перезапускается видимым образом

#html #css #animation #effect #marquee

#HTML #css #Анимация #эффект #выделение

Вопрос:

Я уже несколько дней пытаюсь заставить эффект выделения с изображением тумана работать. Я попробовал несколько обучающих программ (видео и письменных), но эффект продолжает заметно пропускаться / перезапускаться, и эффект не является бесшовным. Само изображение имеет ширину 1000 пикселей и может быть зациклено. Два изображения тумана отличаются и перемещаются с разной скоростью, чтобы добиться лучшего эффекта.

Мне удалось заставить его работать с текстом с помощью другого руководства, но версия img по-прежнему создает проблемы. Для уточнения: изображения отображаются, они перемещаются правильно, но в какой-то момент анимация перезапускается / пропускается / прыгает вместо плавного повторения изображений.

Моя текущая версия выглядит следующим образом (это проект vue):

 .fog-container {
    top: 0;
    height: 100%;
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: 0;
 }
  
.fog-img {
    height: 100%;
    position: absolute;
    width: 300vw;
}
  
.fog-img-first {
    animation: marquee 120s linear infinite;
    background-position: center;
    background-repeat: repeat;
    background-size: contain;
}
  
.fog-img-second {
    animation: marquee 60s linear infinite;
    background-position: center;
    background-size: contain;
    background-repeat: repeat;
}
  
@keyframes marquee {
    0% {
      transform: translate3d(0, 0, 0);
    }
  
    100% {
      transform: translate3d(-200vw, 0, 0);
    }
}  
 <v-main>
  <div class="fog-container">
    <div
      :style="{'background-image':     
        `url(${require('./assets/pictures/background/fog_1.png')})`}"
      class="fog-img fog-img-first"
    />
    <div
      :style="{'background-image': 
        `url(${require('./assets/pictures/background/fog_2.png')})`}"
      class="fog-img fog-img-second"
    />
  </div>
</v-main>