-4

inserir a descrição da imagem aqui

É a fitinha colorida que se expande...

2
  • Esse efeito hover é bastante em animação de links, pode-se criar esses efeitos tanto com css quanto com javascript, pesquise um pouco amigo e você entenderá! 11/12/2016 às 18:27
  • 1
    inova pixel, editei a pergunta colocando um .gif que filmei nesse site que tinhas indicado. Na proxima vêz podes fazer tu isso, ou tirar fotos do efeito que pretendes. Já conheces o site e como se deve criar e formatar uma boa pergunta...
    – Sergio
    11/12/2016 às 19:35

1 Resposta 1

7

O truque é usar transform associado ao pseudo elemento :after e com uma transição no zoom, tipo efeito lupa.

Algo assim:

div {
    width: 150px;
}
div:after {
    display: block;
    content: '';
    border-bottom: 5px solid #2e7061;
    transform: scaleX(0);
}
div:hover:after {
    transform: scaleX(1);
    transition: transform 325ms ease-in-out;
}
<div>Traz aqui o mouse!</div>

0

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