Comment créer une animation de soulignement au survol en utilisant CSS3

Cet article présente principalement les étapes de création d'une animation de soulignement en survol avec CSS3. A une très bonne valeur de référence. Jetons un coup d'œil avec l'éditeur ci-dessous

1. J'ai vu l'effet de survol du titre du thème suivant d'Hexo il y a quelques jours, ce qui est très cool, j'ai essayé d'en écrire un. moi-même, et l'autre est Pour la mise en œuvre de la prochaine, comme d'habitude, l'image ci-dessus

2. Implémenter la petite technologie noire

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

/* 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;
        }

La clé est de définir la largeur à 0 lorsqu'il n'y a pas de survol, afin que la largeur puisse changer de 0 à 100 %.

gauche est à 50%, ce qui fait que la position de départ de l'animation est à 50%.

3. Implémentation officielle du thème hexo next

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

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

La clé de cette implémentation est le passage de scale(0) à scale(1) .

L'origine de la transformation d'échelle CSS3 est le point médian, donc l'animation commencera à partir de la position médiane.

4. La différence entre les deux

On peut également voir à travers l'animation que l'animation suivante a un effet de dégradé transparent, qui est lié à l'expression de échelle.

La première implémentation ne modifie que la largeur, mais l'animation peut également être utilisée pour obtenir le même effet que la suivante.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!