10 super-cool HTML5 Canvas plug-ins essential for programmers, html5canvas

10 super-cool HTML5 Canvas plug-ins essential for programmers, html5canvas
1. Ultra-Cool HTML5 Canvas 3D Rotation Earth Animation

This is a 3D Earth simulation animation based on HTML5 Canvas. The animation uses the ethereum as the background, and the Earth rotates in space. At the same time, we can drag the mouse to observe the earth from different angles. In addition, you can also click the full screen button to watch the Earth Rotation animation in full screen. Remember to share an HTML5 Canvas-based Earth animation a long time ago.

Online Demo

Source code download

2. HTML5 Canvas 3D text animation supports scroll wheel Scaling

We have previously shared many cool and practical HTML5 text animation effects. The most classic one is the HTML5 Canvas magic flame text effects. This is another 3D text Animation Based on HTML5 Canvas. It is characterized by holding down the left mouse button and dragging the text to rotate the text and observe the text from different angles; press and hold the left mouse button to move the text. In addition, you can move the scroll wheel to zoom the text size.

Online Demo

Source code download

3. HTML5 Canvas colorful smoke simulation animation

Previously, we used HTML5 technology to simulate a lot of things on the Canvas. For example, we recently shared HTML5 Canvas with a variety of Cool 3D particle graphics animations. This is also an animated Effect Based on HTML5 Canvas. It simulates the flow effect of colorful smog, which is relatively simple to implement on Canvas.

Online Demo

Source code download

4. CSS3 vertical color menu with Avatar

Today, we want to share with you a special CSS3 menu, which is a vertical menu. When the mouse slides over the menu item, the current menu item will display a beautiful avatar, some formatted text is displayed next to the Avatar. In addition, the background color of each menu item can be dynamically rendered.

Online Demo

Source code download

5. HTML5/CSS3 3D cube puzzles support orientation key Rotation

We have previously shared a lot of 3D cube rotation animations Based on HTML5, CSS3, and Canvas. For example, this super-gorgeous CSS3 multi-color luminous cube rotation animation also has menu applications based on cubes, for example, the menu items of the super-practical CSS3 3D menu are suspended and protruding. Today we are going to share a 3D cube puzzle Application Based on HTML5 and CSS3. A total of 8 small cubes are made up of 3D puzzles. We can click the cube or arrow key to complete the puzzle, at the same time, we can keep the cube rotating.

Online Demo

Source code download

6. CSS3/SVG-implemented task list awesome button click Animation

This is a beautiful CSS 3/SVG task list plug-in. You can enter the name of the task you want to complete in the input box, and click Add to add the task to the list. This is a very common function, but with CSS3 and SVG, we have a very cool animation effect when adding a button, this special effect will also appear in the task addition to the List and deletion list, which is very good. We can even change this plug-in into a very gorgeous comment plug-in.

Online Demo

Source code download

7. CSS3 horizontal slider plug-in with bubble value prompt

Today, we will introduce you to a cool horizontal slide plug-in, similar to the jQuery bidirectional slide set value percentage and the cute pure CSS3 slide switch button, basically, CSS 3 is used to beautify the default horizontal slide bar of the browser. One feature of the slide we shared today is that the value of the slide has a bubble prompt box, and it will shake around when it is dragged like a balloon.

Online Demo

Source code download

8. CSS3/SVG custom single-stick Radiobox jump selection Animation

This is also a single-screen Radiobox, a custom aesthetic version implemented by CSS3. Similar to the previously shared CSS3 custom-emitting radiobox Singleton, this radiobox uses CSS3 to rewrite the radiobox style. In addition, this custom single sequence combines the characteristics of SVG to realize the Skip animation when a single sequence is selected.

Online Demo

Source code download

9. 3D yunxing animation effects based on HTML5 WebGL

Today, we will share with you an animated special effect of yunxing Based on HTML5 Canvas. The whole screen simulates the appearance of a galaxy, such as the simulation of the solar system, and many planets rotate around the center of the galaxy, the Galaxy center is also exceptionally bright. These little stars are drawn on the Canvas, and you can drag the mouse to view the nebula from different perspectives, which is very atmospheric.

Online Demo

Source code download

10. jQuery Select drop-down box beautification plug-in menu fade-out animation

Although the browser is more powerful after the upgrade, the default browser control is gradually becoming more beautiful, especially in the Select drop-down box, it is no longer as ugly as IE6 in the past. But today we will share with you a jQuery-based Select drop-down box beautification plug-in, which completely overwrites the default Select drop-down box style of the browser, in addition, the pull-down menu is also accompanied by a fade-out animation, which is very good. Of course, we have also shared some similar plug-ins before. You can look at the beautiful and practical Select drop-down box beautification plug-in Tether. You can also look at the drop-down box of this jQuery beautification interface.

Online Demo

Source code download

• Fixed Link: http://www.i7758.com/archives/2866.html