A simple & quot; Dynamic Main Menu & quot; example implemented by CSS3, css3 Main Menu

A simple "dynamic Main Menu" example implemented by CSS3, css3 Main Menu
In fact, this example is boring and easy to use.

It mainly shows how CSS3 achieves animation effects.

This article mainly aims to see how much code I need to write to achieve this result.
At the same time, make a comparison with the familiar java.

You do not need to know the comparison results.

Using java to implement the results in the example will be quite large without third-party framework encoding.

Even if flash is used for encoding, It is not small.
Some may say that developing such a thing with flash does not require coding with the help of powerful development tools,
Okay...
In fact, this question just proves why many flash applications are simple but occupy a lot of cpu.

Previously, I said in "chatting": "technically speaking, HTML5 + CSS3 + JS is too suitable for casual games"
Let's think about it. We use technologies such as canvas svg webgl to develop game subjects and js to develop game languages (and can also be used as scripts ), use the elegant features of html5 css3 to make a game UI (that is, to operate the console in the menu dialog box ). isn't that good?


Let's take a look at the example in the attachment.

Use Chrome 4.x or a later version for preview. (I use Chrome 4.1)

Added: safari 4 is also supported.

• Animate_ui.zip (855 Bytes)

A simple problem in css3

Font-size-adjust = x

X defines the aspect value ratio of the font.
Available formulas:
Font size * (font-size-adjust value/aspect value of available fonts) = font size that can be applied to available fonts
Example:
If the 14px Verdana (aspect value is 0.58) is not available, but the aspect value of an available font is 0.46, the replacement font size will be 14 * (0.58/0.46) = 17.65px.

Reference: www.w3school.com.cn/..st.asp
 
CSS3 + Html5 makes a navigation bar effect,

CSS 3 + HTML5 is not required. You can use AJAX + DIV + CSS.
You can use AJAX to obtain the number of unread data and set innerHTML of the div to this number. In addition, this is a relative positioning layer embedded in a DIV (or other block elements. So it is unnecessary to use CSS3 and HTML5. After all, major browsers in China do not support it. Currently, browsers supporting CSS3 and HTML5 only have the latest browsers (such as IE9, opera, safari, and FF)