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
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.
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.