Create a creative animated menu effect with CSS3

CSS3 new features to achieve animation, you can have a preliminary understanding of these new features through this article. This article will bring you some creative menu hover effect. It consists of simple elements such as icons, main headings, subheadings, and the animation effect of the mouse hover by CSS3 the latest transitions (transition) and animations (animation) two features. We used the same elements to make 9 different effects.

Demo Downloads

The icon used in the example is actually a network symbol font, contained in @font-face. This font is developed by the just is nice studio.

Mark

The HTML schema for a menu is an unordered list, where each option is a LINK element consisting of an icon span and a content layer. The content layer contains the main title and subtitle:

Because we use symbolic fonts as icons, we write letters for icons.

Css

The common styles in all the examples contain symbol fonts:

The path to the file is relative to the CSS file, so they should be placed in the Websymbols (css/websymbols/) in the CSS directory.

The advantage of using icons as a font is that you can use beautiful effects for them, such as text shadow. You can also zoom in or out proportionally to your needs.

The unordered list styles in each example are the same. We just make it fit and easy to live in the middle of the screen:

In the following example, you will be shown how the style of the element is serviced for the final effect.

In the 1th example, we'll look at the style of the elements, and in other examples, we'll focus on rewriting the code.

Note: In the following example, I will not write any browser-specific prefixes, but you will see all the necessary prefixes in the sample folder.

Example 1