0

o que eu preciso saber para criar um hover animado como este no menu http://www.webdesignerdepot.com/? Eu sei que este menu é feito com javascript, mas aonde eu devo procurar esse tais icons que parecem gifs, algum site ou font especifico, ou eu teria que criar-los? Alguém pode me mostrar um exemplo simples, de um icon de como eu deveria me guiar e criar o resto.

2 Respostas 2

2

Pode encontrar ícones deste tipo em Metro Icon Font, na página inicial do framework você pode baixá-lo assim como pegar os ícones separadamente, e nele tem as instruções de como utilizar.

Você pode também estar fazendo animações com ícones através do CSS, até com DIV, elementos da página etc...

Para isto você deve utilizar o parâmetro animation do css.

Exemplo

.animar-algo {
    animation: ani-ring 2s ease infinite;
}

Neste caso o elemento que você aplicar este CSS, vai ficar balançando como um sino sem parar. Para adicionar o efeitos apenas quando o mouse passar por cima, utilize o hover.

.animar-algo:hover

A ordem que eu utilizei é a seguinte:

ani-ring 2s ease infinite

nome do efeito tempo de duração função da cronometragem

infinite é para que o efeito seja infinito e não pare

Tem mais exemplos no Metro Icon Font lá no final da página tem mais exemplos que você pode estar inspecionando elemento para ver como se faz o efeito.

0

Veja aqui o Hover.css. É um pacote de vários icones com esse efeito.
Baixe o pacote que ele tem as instruções de como usar, é bem simples.

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 .