CSS implements the highlight effect of the input box-------Day50

Again to the weekend, this day is really fast, tomorrow should go back home, do not know if there will be a chance to write, try to fight for it, really do not want to be so interrupted. If the past will be bored to explode, that now oneself should be a day busy dying, lack of too many things, those wasted time is not annoyed can solve, come out mixed, after all, is to still ah.

Let's start with a picture that shows what the so-called highlight effect is.

There was a light around the input box, or the illusion that the shadow caused the border to glow, which is what I call the highlight effect, so how is it implemented?

So let's start with the code, I am using the Maple browser, is the WebKit kernel, so here only write the WebKit

. aa:hover{  -webkit-transition:border linear. 2s,-webkit-box-shadow linear. 5s; Border-color:rgba (141,39,142,.75 ); -webkit-box-shadow:0 0 18px Rgba (111,1,32,3);}. aa{  height:100px;width:100px;}

Just a few words on the realization of the function, figure I will not go, roughly with the above one effect, then to analyze the success of a few key points:

1, transition transition, border linear. 2s this is to say the gradual transition of the border attribute, and the latter is the gradual transition to the shadow part;

2, Rgba (a,b,c,d), this front we have used many times, the first three to color, and the fourth is transparency, but also to remember is;

3, box-shadow:x y 10px rgba (a,b,c,d), also used in front many times, x y is the direction of the shadow, then the shadow spread distance, and finally the color of the shadow part;

4, the last is: hover, pseudo-elements and pseudo-class can write a separate article, but this: hover at least we are quite familiar with it

Of course, don't forget to write the HTML section.

<input type= "text" class= "AA" >

This can be copied directly to try the effect oh, but I knocked out just WebKit browser amount

Well, to rest, tomorrow will have to get up early, but also run two days ah, a lot of time wasted on the road ...