How to create an animated Hover icon

Asked

Viewed 806 times

0

what I need to know to create an animated Hover like this in the menu http://www.webdesignerdepot.com/? I know this menu is done with javascript, but where should I look for such icons that look like gifs, some site or specific font, or I would have to create them? Can someone show me a simple example of an icon of how I should guide myself and create the rest.

2 answers

2


You can find icons of this type on Metro Icon Font, in home page from the framework you can download it as well as take the icons separately, and in it you have the instructions how to use.

You can also be making animations with icons through CSS, even with DIV, page elements etc...

For this you must use the parameter Animation of css.

Example

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

In this case the element you apply this CSS, will be swinging like a bell non-stop. To add the effects only when the mouse passes over, use the Hover.

.animar-algo:hover

The order I used is as follows::

ani-ring 2s ease infinite

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

Infinite is for the effect to be infinite and not to stop

Have more examples in Metro Icon Font there at the bottom of the page are more examples that you can be inspecting element to see how the effect is done.

0

Behold here o Hover.css. It is a package of several icons with this effect.
Download the package it has the instructions on how to use, it is very simple.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.