20 HTML5/CSS3 supercool apps (with point-Free Download address)

Free points: http://download.csdn.net/detail/yangwei19680827/6956667

1. Powerful visual effects of HTML5 video fragment and reorganization

There are a lot of HTML5 video players, but HTML5 video effects are rare. This HTML5 video fragment and reorganization effect is very exciting, giving a strong visual impact. When you click any part of the video, HTML5 will crush these areas. After a while, these broken video fragments will be automatically combined. It is a very good HTML5 video special effect.

Online Demo/source code download

2. HTML5 3D Google search small box world

HTML5 is really amazing. It's actually the idea of Google search. It uses HTML5 technology to put Google search into a small box and create 3D search. As the mouse moves, the HTML5 3D search box turns very three-dimensional. Click the search button to open the box for Google search.

Online Demo/source code download

3. CSS3/jQuery creative box animation menu

As a front-end developer, I have seen many different jQuery menus, but this jQuery/CSS3 menu is unique. The menu items are embedded in the jiugongge, like a small box, with a warm background, the overall menu looks cute. Click the menu item, and the box will be displayed, showing the specific content of the menu item. The CSS3 menu also has a good animation effect when it is expanded.

Online Demo/source code download

4. Gorgeous HTML5 charts display Real-time Data

HTML5 is also widely used in chart applications. Compared with previous web charts, HTML5 chart production is more convenient and more powerful. This HTML5 chart plug-in looks gorgeous and professional, and also has advantages in data display. It not only supports multi-dimensional data display, but also supports area selection data function, you can use this HTML5 chart to manage your data more conveniently.

Online Demo/source code download

5. HTML5 gravity sensor game's head portrait

My salary has not risen much since the New Year's Eve. I don't want to pay a year-end bonus. I hate my leadership. Now we can take advantage of this HTML5 gravity sensor game to show our leaders. Make some portraits of leaders you hate, and use the HTML5 gravity sensor game plug-in to drag the mouse to shake these portraits, so that you don't need to pay... Tell you not to pay...

Online Demo/source code download

6. Rotating playback of HTML5 3D images

Since the emergence of HTML5 technology, we can see more and more 3D effects on browsers. This HTML5 3D 3D image rotation playback and display tool reflects the powerful HTML5 3D function. Of course, this requires a browser that supports the HTML5 3D function to watch this 3D image demonstration.

Online Demo/source code download

7. HTML5 Chinese chess game custom chess difficulty

Chess games are very mature in desktop games, and there are many Chinese chess versions. Today, this HTML5-based Chinese chess game is very distinctive. We can not only choose the difficulty of Chinese chess games, but also switch the board style. I am tired of writing the program. I would like to have a cup of coffee and a few clicks on the computer. I believe you know the algorithm of HTML5 Chinese chess games, you can open the source code to study this HTML5 Chinese chess game.

Online Demo/source code download

8. HTML5 player mythical classical players

This is a very classical style, but also a very fashionable HTML5 player, said it is a classical player, because this type of stuck HTML5 player is relatively old, said it is fashionable, this is because HTML5 players rarely have such styles and are very creative. If you want to add a personalized player to your individual, you can choose this HTML5 classical player. I personally think this is a myth of the HTML5 player and it is very classic.

Online Demo/source code download

9. HTML5 super Mary game re-experience HTML5 game classic

Do you still remember the Super Mario adventure game that I played when I was a child? Yes, it was a very popular game when we were young. Today, foreigners use HTML5 technology to allow super Mary to run on the webpage. Although super Mary of HTML5 does not have the powerful functions of the original version, but if you are interested, you can write it completely. HTML5 is really powerful, and HTML5 games are even more acute.

Online Demo/source code download

10. Romantic programmer HTML5 love confession Animation

Our programmers are also very romantic in pursuit of love. Below is an HTML5 love confession animation made by a student using the HTML5 knowledge he has learned. The picture is very warm and sweet, this idea is easy to impress girls. If you are a single programmer, make your own love confession animation.

Online Demo/source code download

11. CSS3 password strength verification form code speed table style

When we register a member on the website, entering a powerful and large password will greatly increase the account security. So what kind of password is safer? This CSS3 password Strength Verification Form plug-in prompts you about the security level of the current password. Interestingly, the style of this password Strength Verification plug-in is similar to the Code speed table. As the password strength increases, the Code speed table pointer will rotate clockwise. Of course, the rotation effect is implemented using CSS3 combined with jQuery.

Online Demo/source code download

12. Pure CSS3 Android Logo animation will still be triggered

With CSS3, you can draw many complex pattern icons. Today, the Android Logo icon is implemented using pure CSS3. The Android Logo of CSS3 mainly uses attributes such as rounded corners in CSS3, And the Logo drawn is very lifelike, at the same time, the Android Logo has an animated effect. When the mouse slides over the head and hand of the Android villain, the little hand can also be waved.

Online Demo/source code download

13. Pure CSS3 luminous login form

We have seen a lot of CSS3 forms, which are very exquisite. The CSS3 form introduced today is not only gorgeous in appearance, but also accompanied by color-emitting animation. When the mouse activates the form, a color gradient light-emitting animation will appear around the form. With a black background, the entire CSS3 form looks exceptionally bright. More importantly, the CSS3 luminous form is basically implemented using CSS3, and few JS Code is obviously optimized on the CSS3 engine.

Online Demo/source code download

14. 18 exquisite styles of CSS3 3D progress bar buttons

We often see a progress bar when submitting data on the webpage, but most of the progress bars are displayed elsewhere on the webpage, for example, a window pops up. The progress bar of this CSS3 implementation is displayed on the button, which can more intuitively reflect the progress of user submission. The style of the buttons of the CSS3 progress bar is very beautiful, there are also 3D 3D effects on browsers that support 3D, and there are many display forms of progress bars, a total of 18 styles.

Online Demo/source code download

15. HTML5 ripple animation effects are extremely lifelike

In real life, we can often see the effect of water waves. The raindrops fall into the river, and the river must be filled with water waves. Today, we used HTML5 to simulate the ripple effect of water waves. Click the image of the river to start flooding the water from the click point and stretch to the distance. The water wave simulated using HTML5 is very lifelike, But it consumes a little CPU.

Online Demo/source code download

16. HTML5 rain point fall animation makes the rain point fly

When using HTML5 to implement the rain point fall, pay attention to the following points: 1. The size and shape of the rain point; 2. Speed Control of the rain point fall. Note that the fall speed should be accelerated. This demo animation vividly simulates the rain point fall animation. When the mouse moves up, three rain points are formed and fall down. HTML5 technology is really convenient.

Online Demo/source code download

17. HTML5 douman game PCMAN

Today I want to introduce a good HTML5 game, HTML5 douman game. There is a douman and a group of monsters on the screen. You need to control the douman's movements and eat the small beans on the road, once a douman encounters a monster, you will get OVER the GAME. This HTML5 game still has incomplete features, that is, it cannot be eaten by monsters when a douman encounters a monster. If you are interested, you can continue to improve it. HTML5 game development requires both technology and creativity.

Online Demo/source code download

18. HTML5 pixel-based image crushing and animation placement

You can never think of this HTML5 image animation effect. It splits an image into many pixel particles. After you click the image, these pixel particles are dropped to the ground and continue to click, the crushed pixel image particles are combined into a complete image. It is quite simple to use HTML5 technology to achieve this image crushing effect. If you are interested, you can download the source code to learn.

Online Demo/source code download

19. HTML5 space fighter games

This is a well-made HTML5 game. The protagonist of this HTML5 game is a brave and mighty space fighter. after entering the game, press the "Z" key to launch a bullet and destroy the enemy. The HTML5 fighter game features: 1. The game screen is gorgeous and lifelike, and audio elements are added to make the game more attractive. 2. There are many game elements, there are also many types of enemy planes and bullets, so players will not be bored.

Online Demo/source code download

20. HTML5 Animated Image player

We have seen many image playback plug-ins (Focus charts), many of which are based on jQuery. The HTML5 image player introduced today is very special. It not only has a transition animation effect between images, but also has an animation effect on the elements in the image during the switching, such as text movement, disaggregation, and re-combination. This HTML5 Animated Image player is regarded as a high-end player.

Online Demo/source code download

Original article: http://www.gbtags.com/gb/share/2818.htm