"Turn" 15 incredibly gorgeous html5/css3 animation apps

Translated from: http://www.html5cn.org/article-7089-1.html

A few days ago, the HTML5 standard has been settled, the future of the web will be led by HTML5, of course, as a developer of this good news more tempted. This article mainly shared 15 extremely gorgeous HTML5/CSS3 animation application, for everybody reference study.

1, HTML5/CSS3 picture selection animation can select more than one picture

Today we share a cool and practical HTML5 image selection effect, when the picture is selected, the picture will cover a translucent layer, there is a tick, and when selected, the picture bounce animation effect.

Online Demo Source Download

2, pure CSS3 realization picture retro effect mouse over switch

Today we want to share a very cool picture effect, this effect is often seen in many P-graph software, that is, a picture of a retro-effect rendering. This CSS3 image effect on the implementation of this retro-effect, we just have to slide the mouse over the picture, you can achieve this picture retro effect.

Online Demo Source Download

3, CSS3 gorgeous tab menu with small icon animation

Before we shared a very good CSS3 tab menu HTML5 SVG tab Slider menu, combined with Svg,tab menu implementation is very flexible. Today we're going to share a beautiful tab menu based on CSS3, the tab menu item is a small icon, the mouse is out of date, the menu item displays the corresponding text, and the expanded animation appears.

Online Demo Source Download


4, HTML5/CSS3 book page 3D animation


Some time ago we shared a lot of HTML5 animation, if you are interested in HTML5, you can move to HTML5 animation appreciation learning. Today we are going to share a book page 3D animation based on HTML5 and CSS3, when we slide the mouse over the book, the book will automatically page over, the book 3D effect is very good.

Online Demo Source Download

5, HTML5 3D Domino picture effect with text description

Today to share a very special HTML5 3D image effects, when the mouse slide over the picture, the flat image will appear 3D effect, and this HTML5 3D picture folding effect similar, but also through the mouse slide to show 3D effect. In addition, this HTML5 3D Domino image effect can also set the picture description information.

Online Demo Source Download

6, JQuery UI slider plug-in can be ToolTip hint

Today we are going to introduce a practical jquery plugin that is based on the jquery UI. This jquery slider plugin is very beautiful, can be set in a variety of colors, coupled with the use of CSS3, you can make the slider cursor becomes three-dimensional, the slider of the ToolTip box also appears to fly into the fly out of the animation effect. More jquery plugins can be moved to the jquery plugin section.

Online Demo Source Download

7. CSS3 personal Data form in two-step form

For the step form, we have been introduced before, such as the HTML5 step registration form is very good, today we are going to introduce another step of the form, this is a personal data filling form, we can fill in two steps to the personal data, each step of the switch has a fade animation effect, You can also go back to the previous step to continue filling in.

Online Demo Source Download


8. HTML5/CSS3 Imitation Facebook Login Form


The login form made with CSS3 is really beautiful, we have also shared several on the Html5tricks website, such as CSS3 password strength Verification form can show the strength of the password, this pure CSS3 luminous login form is more colorful. Today we're going to share a Facebook-like sign-in form that's pretty close to the Facebook login form, both visually and functionally.

Online Demo Source Download

9, HTML5/CSS3 super cool progress bar different progress of various colors

This is a line-like CSS3 progress bar, this progress bar has two features: first, with progress bar progress Update, there will be a digital percentage of real-time display, so that the data more intuitive, the second is at different stages of progress, the progress bar color will change, so as to better reflect the current progress status. Add a black background to make the CSS3 progress bar more vibrant.

Online Demo Source Download


10, CSS3 3D light-emitting toggle button simulation effect is very realistic

We have just released a CSS3 switch sliding button, should say a bit of 3D stereoscopic effect, others are very common. Now we want to share a more cool CSS3 switch button, it not only has 3D effect, and can be illuminated, when the switch is open, the next light will light up, and then the light projected on the switch, the effect is quite realistic.

 

Online Demo Source Download

11, HTML5 linear Chart chart data area can be colored

Using HTML5 to make chart plugins is also common, and we've also collected several useful HTML5 chart plugins that really help us visualize the data on the Web. Today we're going to share a practical HTML5 Linear chart plugin, a linear chart that draws different colors within different data regions, making every data region visible.

Online Demo Source Download

12. HTML5 histogram can combine data from multiple charts

We have previously shared several good HTML5 histogram, such as this html5/css3 horizontal histogram chart, very simple and practical chart. Today we're going to share a HTML5 bar chart, a chart plugin that combines data from multiple charts into a single chart, creating animations that blend into the chart data merge process.

Online Demo Source Download

13. HTML5/CSS3 Cue Box tooltip animation

We have previously shared a html5/css3 step-by box ToolTip, but this box is mainly used for step-by-point instructions, not the actual ToolTip. Today we are going to share a cue box ToolTip animation that is implemented using CSS3. When you move the mouse over the icon button, a ToolTip box pops up at the top of the button and is accompanied by a fade-out effect.

Online Demo Source Download

14. HTML5/CSS3 Slider Animation menu icon animation is cool

CSS3 Menu We have previously shared a lot of, there is a menu, drop-down menu, tab menu, etc., you can move to the CSS3 menu section to find. Today we want to share this HTML5/CSS3 slider animation menu is very cool, the mouse over the menu item will have a beautiful mask moved over, and this animation menu has a very cool icon, the overall effect of the menu is very atmospheric.

Online Demo Source Download

15. HTML5 Canvas Drawing tool to define brushes and canvases

HTML5 Canvas also has a more practical application, that is, the network artboard, so that we can directly on the Web page drawing operations. This HTML5 canvas drawing tool, which we share today, allows you to easily implement network drawing, and we can customize the brush's type, weight, color, and also the size and background color of the canvas. We can also extend this HTML5 drawing tool to improve its drawing capabilities.

Online Demo Source Download

"Turn" 15 incredibly gorgeous html5/css3 animation apps