CSS3 implements a simple "dynamic Main Menu" example [conversion], 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)
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)
It is best to write code in html5, css3, or AS to implement a dynamic image on the webpage.
HTML5 Canvas can be painted.
The actual code is as follows,
<Canvas id = "myCanvas"> </canvas>
<Script type = "text/javascript">
Var canvas = document. getElementById ('mycanvas ');
Var ctx = canvas. getContext ('2d ');
Ctx. fillStyle = '# FF0000 ';
Ctx. fillRect (80,100 );
</Script>