A HTML5 form with luminous animation-

Today, I will show you an HTML5 form with luminous animation. It's cool: when the form gets the focus, it will show the effect of the luminous animation around the form, and the color gradient will continue; when the Form loses focus, the light is stopped. Among them, the color gradient animation is only based on web ...,. Today, I want to show you an HTML5 form with luminous animation. It's cool, as shown below:

When the form gets the focus, the form will show the effect of the luminous animation around it, and the color gradient will continue; when the form loses the focus, the light will stop. Only webkit-based browsers have the effect of color gradient animations, such as chrome and safari. The following is a simple post of CSS code and HTML code for implementing this luminous HTML5 form. If you like it, share it with your friends.

The HTML code is as follows:

The CSS code is as follows:

Jquery is required for form focus switching. The js Code is as follows: