Using CSS3 to make hover underline animation method

This paper mainly introduces the method steps of CSS3 making hover underline animation. Has a good reference value. Let's take a look at the little series.

1, a few days ago see Hexo Next topic title Hover effect is very dazzle, oneself try to write one, the other is next realization, as usual first

2, the realization of small black technology

<!--HTML structure-<p>     <a href= "javascript:void (0);" class= "demo1" > Self-implemented hover effects </a> </p >

/* CSS style */        . demo1{            position:relative;            Text-decoration:none;            font-size:20px;            Color: #333;        }        . demo1:before{            content: "";            Position:absolute;            left:50%;            Bottom: -2px;            width:0;            height:2px;            Background: #4285f4;            Transition:all. 3s;        }        . demo1:hover:before{            width:100%;            left:0;            right:0;        }

The key is to define a width of 0 when there is no hover, so that the widths can be changed from 0到100%.

Left is 50%, and the goal is to start the animation position at 50%.

3, Hexo next theme of the official implementation

<!--HTML structure--><p>    <a href= "javascript:void (0); class=" Demo2 ">hexo next topic implementation </a></ P>

/* CSS style */        . demo2{            position:relative;            Text-decoration:none;            font-size:20px;            Color: #333;        }        . demo2:before{            content: "";            Position:absolute;            left:0;            Bottom: -2px;            height:2px;            width:100%;            Background: #4285f4;            Transform:scale (0);            Transition:all 0.3s;        }        . demo2:hover:before{            Transform:scale (1);        }

The key to this implementation is the change in scale (0) to scale (1).

The origin of the CSS3 scale transform is the midpoint, so the animation starts from the middle position.

4. Difference between the two

The animation also shows that the next animation has a transparent gradient effect, which is related to the scale representation.

The first implementation is only a width change, but you can also use animation to achieve the same effect as next.