Css3中如何實現hover動畫的顏色動畫效果

這篇文章主要為大家展示了“Css3中如何實現hover動畫的顏色動畫效果”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Css3中如何實現hover動畫的顏色動畫效果”這篇文章吧。

顏色動畫效果主要是利用:before和:after進行實現的，所以，大家如果使用的時候，切記:before和:after沒有被占用，否則會顯示不正常。

1.顏色塊變化

html

<span class="ech-fade">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.顏色上下劃線變化

html

<span class="ech-overline-l">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箭頭動畫

html

<span class="ech-arrow-l">arrow-l</span><span class="ech-arrow-r">arrow-r</span><span class="ech-arrow-t">arrow-t</span><span class="ech-arrow-b">arrow-b</span><span class="ech-arrow-l-move">arrow-l</span><span class="ech-arrow-r-move">arrow-r</span><span class="ech-arrow-t-move">arrow-t</span><span class="ech-arrow-b-move">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;

以上是“Css3中如何實現hover動畫的顏色動畫效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！