Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

150
Visualizações
Problems with creeping line on the site

Good day. I want to implement a running line with text and a picture on the site. I have been suffering for a long time with the implementation itself. Came in a result when the line runs fine but breaks off at the end and starts over. The idea is that the line should not break and move with infinite spaces. Below I am attaching the code

html

  <div class="line-block">

    <div class="line__wrapper">
      <p class="line__text">Marketplace <br> Leader</p>
      <img src="images/general/logo.svg" alt="logo" class="line__img">
    </div>

    <div class="line__wrapper">
      <p class="line__text">Marketplace <br> Leader</p>
      <img src="images/general/logo.svg" alt="logo" class="line__img">
    </div>

    <div class="line__wrapper">
      <p class="line__text">Marketplace <br> Leader</p>
      <img src="images/general/logo.svg" alt="logo" class="line__img">
    </div>

  </div>

  <div class="line-block">

    <div class="line__wrapper">
      <p class="line__text">Marketplace <br> Leader</p>
      <img src="images/general/logo.svg" alt="logo" class="line__img">
    </div>

    <div class="line__wrapper">
      <p class="line__text">Marketplace <br> Leader</p>
      <img src="images/general/logo.svg" alt="logo" class="line__img">
    </div>

    <div class="line__wrapper">
      <p class="line__text">Marketplace <br> Leader</p>
      <img src="images/general/logo.svg" alt="logo" class="line__img">
    </div>

  </div>

</div>

sass

.line-infinite
  margin: 30px auto
  padding: 30px 0px
  display: flex
  justify-content: space-between
  align-items: center
  border-top: 1px solid #fff
  border-bottom: 1px solid #fff
  overflow: hidden
  div
    width: 200%
    display: flex
    justify-content: space-between
    animation: runline 5s linear infinite

.line__block
  width: 100%

.line__wrapper
  min-width: 33%
  display: flex
  justify-content: space-between
  align-items: center

.line__text
  font-size: 32px
  line-height: 36px
  text-align: center
  margin: 0px 50px

.line__img
  width: 200px

@keyframes runline
  0%
    transform: translateX(0%)
  100%
    transform: translateX(-50%)
    
about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

In the animation property you put on the div insert forwards at the end of the animation or type: animation-fill-mode: forwards; in the div element you can find more about animation-fill-mode property here reply to me if you have any more problems

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda