-1

Estava estudando uns sites e me deparei com o site do café pilão (https://www.pilao.com.br/).

Se passarmos o mouse sobre o menu ele faz uma animação bem interessante. No caso da imagem, o menu cápsulas:

inserir a descrição da imagem aqui

Minha questão seria a seguinte: A animação é feita através de algum "gif animado" ou é uma outro tipo de recurso?

Código:

<a class="x-main-menu__link" href="/nossos-cafes/capsulas" title="Cápsulas">
  <svg xmlns="http://www.w3.org/2000/svg" width="24.523" height="24.068" viewBox="0 0 24.523 24.068" class="SVGcapsulas">
    <path id="np_coffee-capsule_2729393_000000" d="M40.824,38.877a2.187,2.187,0,0,1-2.188,2.188H18.549a2.188,2.188,0,0,1-.7-4.28l1.014-2.851,1.458-13.713h0a.543.543,0,0,1,.142-.3l1.921-2.108a.571.571,0,0,1,.313-.175L26.4,17a.357.357,0,0,1,.1,0h4.2a.373.373,0,0,1,.08,0l3.7.631a.571.571,0,0,1,.315.175l1.91,2.111a.543.543,0,0,1,.142.3L38.3,33.932l1.014,2.851h0a2.186,2.186,0,0,1,1.508,2.092ZM18.549,39.971H38.626a1.1,1.1,0,0,0,0-2.209H18.549a1.1,1.1,0,0,0,0,2.209ZM35.8,20.829H21.372l-1.36,12.682H37.149Z" transform="translate(-16.3 -16.998)" fill="#41211F"></path>
  </svg>
<p>Cápsulas</p></a>

1 Resposta 1

0

Não é um GIF. O fundo castanho pode ser feito com CSS. A imagem branca dentro do castanho é animada atraves do CSS do path do SVG. Pode ver algumas ideias de animações aqui https://www.hongkiat.com/blog/svg-animations/

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 .