Css3中hover動畫的顏色動畫怎麼使用

來源:互聯網
上載者:User
我們知道,在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裡的盒子模型的種類區別

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.