10 Cool HTML5/CSS3 applications and source code

1. CSS3 Password strength Verification form, Code Speed table style

When we register a member on the website, enter a strong and large password will greatly increase the security of the account, then what kind of password is more secure? This CSS3 password strength Verification form plug-in can prompt you to enter the security level of the password, it is interesting that the password strength verification plug-in style resembles the speed table, along with the increase in password strength, the speed meter pointer will rotate clockwise, of course, the effect of rotation is the use of CSS3 combined with jquery.

Online Demo

SOURCE download

2, Pure CSS3 Android logo animation drawing, small hands will still move

Using CSS3 can draw a lot of complex pattern icons, today, the use of pure CSS3 implementation of Android logo icon, the CSS3 Android logo is mainly used in the CSS3 of the rounded corners and other properties, the logo is very lifelike, and the Android Logo also animated, the mouse over the android villain's head and hands, small hands can also be waved.

Online Demo

SOURCE download

3, pure CSS3 luminous login Form

We have seen a lot of CSS3 forms, the production is very beautiful, today introduced this CSS3 form not only gorgeous, but also accompanied by color light animation. When the mouse activates the form, a glowing animation of the color gradient appears around the form, with a black background, and the entire CSS3 form looks exceptionally bright. More importantly, this CSS3 light-emitting form is basically implemented with CSS3, with very few JS code, and the optimization on the CSS3 engine is very obvious.

Online Demo

SOURCE download

4, CSS3 3D progress bar button 18 beautiful style

We often see the progress bar when we submit data on a webpage, but most of the progress bars are displayed elsewhere on the page, such as a popup window. This CSS3 implementation of the progress bar is displayed on the button, you can more intuitively reflect the progress of the user submitted, the CSS3 progress bar button style is very beautiful, in support of 3D browser can also have three-dimensional effect, and the progress bar shows a lot of forms, a total of 18 styles.

Online Demo

SOURCE download

5, HTML5 water waves animated effects

In the real life, we can often see the effect of water waves, raindrops fall into the river, rivers must have a wave. Today we use HTML5 to simulate the ripple effect, click on the river's image, you can start from the click of the water waves, and extend to the distance. The effect of the water waves simulated by the HTML5 is very realistic, but a bit CPU-consuming.

Online Demo

SOURCE download

6, HTML5 raindrops drop animation, let the rain fly up

The use of HTML5 to achieve the drop of raindrops need to pay attention to: 1, the size and shape of raindrops, 2, the speed of falling rain control, attention should be accelerated whereabouts. This demo animation is a vivid simulation of raindrops drop animation. When the mouse moves up, it will form 3 raindrops and drop down. HTML5 technology is really handy.

Online Demo

SOURCE download

7, HTML5 eat bean man game PCMan

Today will introduce a good HTML5 game, HTML5 eat beans people game, the screen has a bean-eater and a group of monsters, you need to control the bean people move to eat the small beans on the road, once eating beans people encounter monsters are eaten, you game over. This HTML5 game is still a little imperfect, is to eat beans people encounter monsters can not be eaten by monsters, interested students may continue to improve it. HTML5 game development requires not only technology, but also creativity.

Online Demo

SOURCE download

8, HTML5 pixel smash picture animation, pictures scattered on the ground

This HTML5 picture animation effect You never imagined, it crushed a picture into a lot of pixel particles, click on the picture, these pixel grain edge drop on the ground, continue to click, the shattered pixel image particles will be re-assembled into a complete picture. With HTML5 technology to achieve this kind of picture crushing effect is quite simple, interested students can download the source code to learn.

Online Demo

SOURCE download

9, HTML5 space fighter game, vivid

This is a well-crafted HTML5 game, the protagonist of the HTML5 game is a heroic and mighty space fighter, enter the game press "Z" key to fire bullets, eliminate enemy aircraft. The HTML5 fighter game is characterized by: 1, the game screen is very gorgeous lifelike, and add sound elements, so that the game more charming, 2, a lot of game elements, the type of enemy aircraft and the type of firing bullets are also many, so that players will not dull.

Online Demo

SOURCE download

10, HTML5 animation picture player, high-end atmosphere

We've seen a lot of picture play plugins (focus charts), many of which are based on jquery. Today introduced the HTML5 picture player is very special, it not only in the picture switch has the transition animation effect, and in the switch when the picture element also will appear the animation effect, compared with the text movement, the beating, the regroup and so on. This HTML5 animated picture player is a high-end atmosphere on the grade.

Online Demo

SOURCE download

This article fixed link: http://www.i7758.com/archives/1310.html

10 Cool HTML5/CSS3 applications and source code