A selection of 19 gorgeous HTML5 animations and practical cases

The following is my collection of 19 cool HTML5 animation and practical cases, feel good, share to everyone.

1, HTML5 Canvas Flame Spray animation effect

Remember the previous share of a HTML5 fireworks animation HTML5 Canvas Fireworks effects, today we want to share a similar HTML5 animation effect, a HTML5 based on the canvas flame jet animation. Use the mouse to drag a straight line, the length of the line to indicate the intensity of the flame spray, in addition, the flame can also reflect the effect of the motion Oh.

Online Demo Source Download

2.HTML5 3DCube Rotation Animation

We have previously shared a HTML5 3D cube rotation animation that can be switched to any side of the cube. Today we will share a beautiful HTML5 3D cube rotation animation, the color of this cube looks very bright, the animation is also very smooth rotation. is a very good HTML5 3D animation effect.

Online Demo Source Download

3, Html5/css3 realize the big windmill rotation animation

This time we are going to share a cool HTML5 animation, is a can rotate the animation effect of the big car, review the use of HTML5 implementation of the rotation animation, we can see HTML5/CSS3 implementation of 3D rotating gyro animation, their implementation is the use of CSS3 transform: Rotate properties, this big car animation is indeed more powerful.

Online Demo Source Download

4. HTML5 Car animation Cool HTML5 Jeep

A few days did not share HTML5 animation, a lot of HTML5 animation is the use of CSS3 some features and canvas features to complete, such as this HTML5/CSS3 to achieve the Batman character animation using CSS3 animation features, HTML5 Canvas simulates the dress tearing animation using the HTML5 canvas feature. Today we are going to share a Jeep animation using HTML5/CSS3, which can be scrolled horizontally and very lifelike.

Online Demo Source Download

5, pure CSS3 3D picture Flip Show image 3D shadow effect

Before we shared some HTML5 image 3D effects, this article shares 10 stunning HTML5 image effects, we can see a lot of 3D image effect. Today we will share a 3D image with pure CSS3 to flip the display effect, click on the image or the page button below to select the corresponding picture, and to achieve a flip display.

Online Demo Source Download

6, HTML5 swinging text effects similar to Willow swing

Before we shared some HTML5 text effects on html5tricks , like this html5/css3 3D text effect text Valgus effect, like this HTML5 pixel text explosion recombination animation effects are very distinctive. Today we will share a HTML5 text effect that can be oscillating, the text vertical droop, and can be slightly swinging in the breeze, like the willow branches in the spring breeze.

Online Demo Source Download

7, HTML5/CSS3 3D Wood rotation animation

Today we are going to share a fascinating html5/css3 3D rotation animation, the protagonist of this 3D animation is a small wooden bar, each small wooden bar will be rotated, small wooden bars between the rotation of a certain interval, so there will be a spiral of visual effects. In addition, like previously shared HTML5 3D animations, the CSS3 transform properties are also available, click here to see more HTML5 3D effects.

Online Demo Source Download

8, beautiful CSS3 animation progress bar can customize the progress bar color

Today we are going to share a beautiful CSS3 animation progress bar, we can use it to show the proportion of each data, the effect is very good. We have also shared a lot of powerful CSS3 Progress Bar, like the pure CSS3 progress bar Gorgeous 5 Color progress bar example, CSS3 SVG progress bar Loading animated cool glow effects are similar to today's share of the comparison, you can see.

Online Demo Source Download

9. CSS3 Vertical icon menu with ToolTip box

Today we are going to share a CSS3 menu , the menu looks very beautiful, is a vertical arrangement of small icons, the mouse over the menu item, the background of the menu item will fill the gradient color, in addition to the menu item description of the ToolTip prompt box. We have also shared many CSS3 vertical menus, like this CSS3 two-level Draw menu Menu background sliding animation, pure CSS3 vertical Animation menu, etc. are very good CSS3 vertical menu buttons.

Online Demo Source Download

10. Pure CSS3 Background Gradient button button icon fade in and fade out animation

Today we are going to share a pure CSS3 implementation of the button animation, this button animation has the following characteristics: When the mouse over the button, the small icon on the button will be exploded to fade the button, replace it when the corresponding text, when the mouse left the button, the small icon will explode in the way the button. For more CSS3 Buttons , we can find them in the CSS3 button column.

Online Demo Source Download

11.HTML5 3DCube Rotation Animation

We have previously shared a HTML5 3D cube rotation animation that can be switched to any side of the cube. Today we will share a beautiful HTML5 3D cube rotation animation, the color of this cube looks very bright, the animation is also very smooth rotation. is a very good HTML5 3D animation effect.

Online Demo Source Download

12. Dynamic CSS3 Loading text effects

This is a very handsome CSS3 loading loading animation, although it seems only loading these letters, but the use of CSS3 features, you can render these letters very dynamic. Unlike the previously recommended CSS3 loading animated pure CSS3 loading loading animated diagram, this loading animation can show stunning results in just a few letters.

Online Demo Source Download

13. CSS3 Multi-style small icon button with share button

Today we are going to share a very rich style of CSS3 button effects, these buttons look a bit like Google's style, and each button with a small personality icon. Another button has a feature, you can also customize a good sharing button. Before we shared a lot of beautiful CSS3 buttons, you can see in the CSS3 button directory.

Online Demo Source Download

14, Pure CSS3 realization slider switch toggle button animation

Before we shared some CSS3 switch switch buttons, like this CSS3 3D illuminated toggle button, HTML5/CSS3 switch button stereoscopic 3D button. Today we're going to share a pure CSS3 implement slider switch toggle button Animation, this button is a rocker, the pole pushed down the switch state, different switch states have different color indicators.

Online Demo Source Download

15, HTML5/CSS3 toothbrush animation simulation real brushing effect

Today we are going to share a good html5/css3 animation effect, you a lovely toothbrush, toothbrush appearance is the use of pure CSS3 drawn out, but also relatively simple. The other is the brushing animation, looks very funny, like the real brushing, left brush, right brush, very cute toothbrush animation.

Online Demo Source Download

16. CSS3 Visual Web editor based on TINYMCE editor

The last time we shared a Web page Editor jquery Lightweight Web Editor is selected to edit and the configuration is relatively simple. Today we are going to share a CSS3 Visual Web page editor based on TinyMCE, the editor is quite sophisticated, you can do all kinds of things with text, and you can add links and align text. is a more powerful page editor.

Online Demo Source Download

17, CSS3 realize a contact form input box with small icon

We've already shared a very beautiful CSS3 contact Form CSS3 Contact form the background of transparency is fascinating, interested friends can go to see. Today we're going to share a nice looking CSS3 contact form, which has a small icon in the input box of the CSS3 contact form, and can verify the information entered when the information is submitted.

Online Demo Source Download

18. HTML5/CSS3 Multi-color histogram with datum data cable

We have previously shared several very good HTML5 histogram, like HTML5 histogram can combine data of multiple charts, html5/css3 horizontal histogram chart. The HTML5 bar chart, which I want to share, is also very good, and it has a variety of colors to represent different data. The most important feature is that the HTML5 has a reference cable, which allows you to visually see the deviation of each data item relative to the reference value.

Online Demo Source Download

19, HTML5/CSS3 Picture Description effect Text description floating on the picture

Today to share a picture effect based on HTML5 and CSS3, the picture effect is very practical, you can let the picture on your Web page in the picture above the image of some descriptive text, the description of the text in the display when the fade animation effect, while the description of the text style can also be customized diversification, is a very good HTML5 picture effect.

Online Demo Source Download