Create a creative animated menu effect with CSS3

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.