0

Boa tarde

Há um efeito de um carrinho percorrendo uma estrada no link abaixo:

http://institutosorridents.org.br/

inserir a descrição da imagem aqui

Inspecionando o código encontrei o código css abaixo :

#rota-do-sorriso > #mapa > #unidade-movel {
    position: absolute;
    left: 100%;
    top: 97px;
    animation: unidade-movel 10s infinite;
}

Percebi que se trata de uma animation um recurso que não vi anteriormente mas eu tentei utilizar o mesmo código desse site mas não consegui.

Alguém poderia me ajudar ?

Fico no aguardo

1 Resposta 1

3

Cara o que acontece é que essa propriedade animation é um shorthand para várias outros atributos, é o mesmo que background-imagem, background-size, etc. mas com o animation é algo como animation-name, animation-direction, etc... Leia mais aqui. https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Animations/Usando_anima%C3%A7%C3%B5es_CSS

Sobre essa animação o nome dela é unidade-movel então vc tem que procurar no CSS o @keyframes unidade-movel essa é a animação instanciada no animation

Repliquei aqui o código para vc entender melhor

 body {
 padding-top:30px;
 }
 #rota-do-sorriso > #mapa > #unidade-movel {
    position: absolute;
    left: 100%;
    top: 97px;
    animation: unidade-movel 3s infinite;
}

 @keyframes unidade-movel {
  0% {
      top: -64px;
      left: 0%;
  }
  10% {
      top: -64px;
      left: 10%;
  }
  20% {
      top: -64px;
      left: 20%;
  }
  30% {
      top: -64px;
      left: 30%;
  }
  40% {
      top: -26px;
      left: 45%;
  }
  45% {
      top: 28px;
      left: 42%;
  }
  50% {
      top: 75px;
      left: 31%;
  }
  60% {
      top: 97px;
      left: 40%;
  }
  70% {
      top: 97px;
      left: 50%;
  }
  80% {
      top: 97px;
      left: 60%;
  }
  90% {
      top: 97px;
      left: 70%;
  }
  100% {
      top: 97px;
      left: 100%;
  }
}
<section id="rota-do-sorriso" class="pt-3 pdd-v">

    <div class="content">
        <div class="row">
            
            

        </div>
    </div>

    <div id="mapa" class="d-none d-lg-block">

        <span id="estrada">
            <img src="https://placecage.com/300/100" width="100%" height="auto">
        </span>

        <span id="unidade-movel">
            <img src="https://placecage.com/80/30" alt="Unidade Móvel" width="150rem" height="auto">
        </span>
    </div>

</section>

2
  • só tenho a agradecer, aprendi bastante com sua ajuda e de quebra resolvi meu problema!
    – Grafite
    Commented 16/01/2019 às 0:39
  • @Grafite sem problemas meu amigo, fico feliz em ter ajudado. Procure na internet por tutoriais de CSS animation vc vai achar muita coisa interessante
    – hugocsl
    Commented 16/01/2019 às 0:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .