我們知道,在CSS裡實現顏色動畫的效果主要是利用:before和:after來實現的,今天來給大家介紹一下Css3中hover動畫的顏色動畫怎麼使用。
1.顏色塊變化
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.顏色上底線變化
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箭頭動畫
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;
相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
相關閱讀:
Css3中的transform 漸層屬性怎麼使用
Css3製作動態開關的效果的實現步驟
CSS裡的盒子模型的種類區別