So erstellen Sie eine Hover-Unterstreichungsanimation mit CSS3

In diesem Artikel werden hauptsächlich die Schritte zum Erstellen einer Hover-Unterstreichungsanimation mit CSS3 vorgestellt. Hat einen sehr guten Referenzwert. Schauen wir es uns mit dem Editor unten an

1. Ich habe vor ein paar Tagen den Hover-Effekt für den nächsten-Thementitel von Hexo gesehen, der sehr cool ist Ich selbst, und der andere ist Für die Implementierung als nächstes wie üblich das Bild oben

2. Kleine schwarze Technologie implementieren

 <!-- 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;
        }

Der Schlüssel besteht darin, die Breite als 0 zu definieren, wenn kein Hover erfolgt, sodass sich die Breite von 0 auf 100 % ändern kann.

links ist 50 %, sodass die Startposition der Animation bei 50 % liegt.

3. Offizielle Implementierung des Hexo Next Theme

<!-- 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);
        }

Der Schlüssel zu dieser Implementierung ist der Wechsel von Scale(0) zu Scale(1) .

Der Ursprung der Skalierungstransformation von CSS3 ist der Mittelpunkt, sodass die Animation an der mittleren Position beginnt.

4. Der Unterschied zwischen den beiden

Durch die Animation ist auch zu erkennen, dass die nächste Animation einen transparenten Verlaufseffekt hat, der mit dem Ausdruck von zusammenhängt Skala.

Die erste Implementierung ändert nur die Breite, es kann jedoch auch eine Animation verwendet werden, um den gleichen Effekt wie bei der nächsten zu erzielen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Hover-Unterstreichungsanimation mit CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!