Cool CSS3 luminous search form with demo and source code

When I visited a foreign forum yesterday, I saw a post asking for help on how to use CSS3 to achieve the luminous effect. In my reply, I recommended a CSS3 luminous search form, you can use the glow attribute of CSS3 to set the color styles of 0% and 100% to make them gradient and then use the background with obvious comparison to simulate the effect of the starting light, I downloaded the CSS3 luminous form. Let's take a look:

When the search box on the figure is activated, a special effect will pop up.

Let's take a look at the source code.

The HTML code is very simple. A text box and a submit button are as follows:

Search

The focus is on the CSS3 code. The first step is to initialize the style of the search box and the Search button. in order to match the background with the luminous effect, we set their styles as follows:

{:;:;:;:;:;}{:;:;:;:;:;:;:;}{:;:;:;:;:; :;:;}{:;:;:;:;:;:;:;}{:;:;:;:;:;:;:;:;:; :;:;:;:;:;:;}{:;:;:;:;:;:;:;:;:;:;:;:;:; :;:;:;:;:;:;:;}{:;}{:;}{:;}{:;:;:;:;:;:; :;:;:;:;:;:;:;:;:;}{:;}{:;}{:;:;:;:;:;:; :;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:; :;:;}{:;:;:;:;:;:;:;:;}{:;:;:;:;:;:;:; :;}

Then we use the glow attribute to render the luminous effect. In order to adapt to browsers with different kernels, we made the following settings respectively:

{:;:;}{:;:;}{:;:;}{:;:;}{:;:;}{:;:;}{:; :;}{:;:;}{:;:;}{:;:;}

Finally, we will package the source code for your reference.>