So verwenden Sie die Farbanimation der Hover-Animation in CSS3

Wir wissen, dass der Effekt der Farbanimation in CSS hauptsächlich durch die Verwendung von :before und :after erreicht wird. Heute werde ich es Ihnen vorstellen. So verwenden Sie die Farbanimation der Hover-Animation in CSS3.

1. Farbblockänderungen

html
<span>fade</span>
css
/当前元素设置相对定位/.ech-fade, .ech-fade-t, .ech-fade-b, .ech-fade-l, .ech-fade-r, .ech-fade-c-in, .ech-fade-m-in, .ech-fade-m-out, .ech-fade-c-out, .ech-bounce-t, .ech-bounce-b, .ech-bounce-r, .ech-bounce-l { position: relative; transition: all .3s; z-index: 1;

2. Farbänderungen der oberen und unteren Unterstreichung

html
<span>overline-l</span>
css
/上划线和下划线变化 当前元素样式设置相对定位/.ech-overline-r, .ech-overline-l, .ech-underline-r, .ech-underline-l, .ech-underline-c, .ech-overline-c, .ech-underline-c-out, .ech-overline-c-out{ position: relative; transition: all .3s; z-index: 1;

3 Pfeilanimation

html
<span>arrow-l</span><span>arrow-r</span><span>arrow-t</span><span>arrow-b</span><span>arrow-l</span><span>arrow-r</span><span>arrow-t</span><span>arrow-b</span>
css
.ech-arrow-l, .ech-arrow-r, .ech-arrow-t, .ech-arrow-b, .ech-arrow-l-move, .ech-arrow-r-move, .ech-arrow-t-move, .ech-arrow-b-move{ position: relative; transition: all .3s; z-index: 1;

I Ich glaube, Sie haben es gesehen. Sie beherrschen die Methoden in diesen Fällen. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie das Transformationsverlaufsattribut in CSS3

Schritte zum Implementieren des Effekts der dynamischen Erstellung Schalter in CSS3

Der Unterschied zwischen den Arten von Boxmodellen in CSS

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Farbanimation der Hover-Animation in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!