CSS3 making hover underline animation

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

< Div >        <  href= "javascript:void (0);" class = "Demo1" > Self-fulfilling hover effects </a></div> 

. 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

< Div >    <  href= "javascript:void (0);" class = "Demo2" > Hexo Next Topic implementation </a></div>

. 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.

Anyway, it's finally come true ...

Original address: http://www.cnblogs.com/zhangmingze/p/5351983.html

CSS3 making hover underline animation