16 best HTML5 anime demos and source code,

16 best HTML5 anime demos and source code,

1. You can select multiple images for HTML5/CSS3 Image Selection animations.

We have previously shared several cool HTML5 image effects, such as HTML5 3D image folding effects and HTML5 3D rotating image album. Today, we will share a cool and practical HTML5 Image Selection special effect. When an image is selected, it will cover a translucent layer with a check box on it, in addition, when selected, the image will have a bounce animation.

Online Demo

Source code download

2. HTML5/CSS3 hide animation login form

We have previously shared a facebook-like login form, which is really amazing. Today, we will share a distinctive CSS3 login form. the user name and password of this login form are entered separately. When you enter the user name and press enter, the password input box will be folded and expanded. This 3D folding effect is very good.

Online Demo

Source code download

3. Use CSS3 to achieve image retro effects, move the mouse over and switch

Today, we want to share a very cool image effect. This effect is often seen in many P Graph Software, that is, rendering a picture with a vintage effect. This CSS3 image achieves this retro special effect. We only need to move the mouse over the image to achieve the retro effect of this image.

Online Demo

Source code download

4. The simple CSS3 drop-down menu looks fresh

Today we will share a very fresh-looking CSS3 drop-down menu, which is different from what we have previously shared. It can be mainly applied on some operation panels, some small icons can make the CSS3 drop-down menu more beautiful and practical. In addition, because the menu is very simple, we can easily expand it.

Online Demo

Source code download

5. HTML5/CSS3 for 3D rotating gyro Animation

This time I want to share with you a very creative HTML5/CSS3 animation special effect, which is a 3D gyro animation that can be rotated. This animation is similar to the previously shared HTML5 animation. It mainly utilizes the transform attribute of CSS3 to rotate the object and assign a value to translateZ to implement the left and right swing animation, make the entire gyro rotation very realistic.

Online Demo

Source code download

6. Awesome HTML5 loop music player with playlist

Not long ago, we have already shared a cool HTML5 loop music player. The HTML5 loop music player looks very cool. Today, we want to share the same HTML5 music player, different from the previous one, this HTML5 loop music player can have a playlist. You can select music to play.

Online Demo

Source code download

7. Powerful iGrapher function for HTML5 linear charts

IGrapher is an HTML5-based linear chart application. Similar to the previously shared HTML5 linear chart data area, iGrapher can plot curves based on different statistical ranges, at the same time, we can use the mouse wheel in iGrapher to zoom in and out the statistical range, and we can select the expected statistical data in the menu bar.

Online Demo

Source code download

8. HTML5/CSS3 slider animation menu icon animation is cool

We have already shared a lot about CSS3 menus, including 3D menus, drop-down menus, and Tab menus. For details, please refer to the menu bar under CSS3. The HTML5/CSS3 slider animation menu we want to share today is very cool. When you move the mouse over the menu item, a beautiful mask will be moved over, And this animation menu also has a very cool icon, the overall menu effect is very good.

Online Demo

Source code download

9. HTML5 Canvas cool HTML5 Animation

HTML5 Canvas animation is very cool. Many creative developers can use the Canvas feature of HTML5 to create many good animation effects. Today, we want to share an HTML5 Canvas hair elegant animation, which simulates the effect of hair fluttering and adds cute faces. It can be said that it is very technical and creative.

Online Demo

Source code download

10. HTML5/CSS3 date selection plug-in with date range

Today we will share a practical HTML5/CSS3 date selection plug-in. The appearance of this date selection plug-in is quite fresh and simple, but it is quite beautiful as a whole. In addition, this date selection plug-in also has the biggest feature, that is, you can customize the date range, we can quickly set the date within the range, very convenient.

Online Demo

Source code download

11. HTML5 car animation-a cool HTML5 jeep

I haven't shared HTML5 animations for a few days. Many HTML5 animations used some of CSS3's features and Canvas features. For example, this HTML5/CSS3 achieves Batman character animation and uses CSS3's animation features, HTML5 Canvas uses the HTML5 Canvas feature to simulate Clothes Tearing. Today, we will share a jeep animation using HTML5/CSS3. The car can be horizontally rolled and extremely realistic.

Online Demo

Source code download

12. HTML5 Canvas drawing tools can define brushes and canvases

HTML5 Canvas also has a more practical application, that is, the network Canvas, so that we can directly draw images on the web page. The HTML5 Canvas painting tool that we want to share today can be used to easily implement the network drawing function. We can customize the type, width, and color of the brush, you can also define the size and background color of the canvas. We can also extend this HTML5 drawing tool to improve its drawing function.

Online Demo

Source code download

13. HTML5/CSS3 3D text effects

We have previously shared a special CSS3 3D text effect HTML5/CSS3 text projection effect. With projection and gradient, the effect is still very good. Today, we will share a cool HTML5/CSS3 3D text special effect. The special effect of this text is that the text will show a 3D turn when the mouse slides over the text, a very good text special effect.

Online Demo

Source code download

14. The combination of CSS3 wave menu and background is superb

We have shared many different types of CSS3 menus. It should be said that the effects are better than those of traditional CSS menus. The CSS3 menu to be shared this time is a bit special. The overall shape of the menu is similar to the ripple shape. When you move the mouse over the menu item, the background color is changed to indicate that the menu item is activated. In addition, the combination of the CSS3 menu with good background images is even more shocking.

Online Demo

Source code download

15. HTML5/CSS3 fashionable disc clock animation with current date

We can use HTML5 and CSS3 to implement some animation effects on watches and clocks. The effects are good. Today, we will share a disc clock animation using HTML5 and CSS3. The clock looks very fashionable. More importantly, the HTML5 clock animation also has the current date, which is not available for many clocks.

Online Demo

Source code download

16. CSS3 multi-topic color with icon prompt plug-in

On the webpage, we have completed the time-consuming operations. It is best to give the user a prompt. This CSS3 plug-in will implement this prompt function. The CSS3 prompt function has several different colors, and each prompt box has a specified small chart. You can click the close button to close the prompt box. The prompt box shows the out-of-band CSS3 effect.

Online Demo

Source code download

Fixed Link: http://www.i7758.com/archives/1244.html