How to create hover underline animation using CSS3

This article mainly introduces the steps of making hover underline animation with CSS3. Has very good reference value. Let’s take a look with the editor below

1. A few days ago, I saw Hexo’s next theme title hover effect is very cool, I tried to write one myself, and the other one is For the implementation of next, as usual, the picture above

2. The key to realizing Xiaohei Technology

 <!-- html结构 -->
 <p>
     <a>自己实现的hover效果</a>
 </p>

is that there is no hover. When defining width as 0, the width can be changed from 0 to 100%.

left is 50%, so that the starting position of the animation is at 50%.

3. Official implementation of hexo next theme

/* css样式 */
        .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;
        }

<!-- html结构 -->
<p>
    <a>Hexo next主题的实现</a>
</p>

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

The origin point of CSS3's scale transform is the midpoint, so the animation will start from the middle position.

4. The difference between the two

can also be seen through animation. Next animation has a transparent gradient effect, which is related to the expression of scale.

The first implementation only changes the width, but animation can also be used to achieve the same effect as next.

The above is the detailed content of How to create hover underline animation using CSS3. For more information, please follow other related articles on the PHP Chinese website!