css3文字顏色動態漸變

瀏覽 Animate.css官網 的時候發現Animate.css這幾個字母的顏色會慢慢變化，個人覺得還是很有意思，本以為是利用animate 改變color,結果F12后發現好多奇怪的css屬性。

先來看看我的實現方法

簡易實現方法

h2{
    height: 60px;
    color: #f35626;
    -webkit-animation: hue 6s infinite linear;
}
@-webkit-keyframes hue {
    from {
        color: #f35626;
    }
    to {
        color: #feab3a;
    }
}

通過通過css3的動畫屬性可以輕松改變文字的顏色，但是這里有一個小問題，就是動畫執行一個輪回結束后，顏色有一個明顯變化過程。是因為動畫的結束后的最后一幀的顏色為#feab3a，立馬會重新執行動畫，顏色會初始到第一幀#f35626，所以會有明顯的變化。我們稍微改變一下動畫的寫法。

@-webkit-keyframes hue {
    0%{
        color: #f35626;
    }
    to {
        color: #feab3a;
    }
    100%{
        color: #f35626;
    }
}

這樣開始和結束都是同樣的顏色，動畫輪回顏色就不會突變了。

Animate.css寫法

先看看Animate的寫法

h2{
    height: 60px;
    color: #f35626;
    background: coral;
    background-image: -webkit-linear-gradient(45deg,#f35626,#feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 6s infinite linear;
}
@-webkit-keyframes hue {
    from {
        -webkit-filter: hue-rotate(0deg);
    }
    to {
        -webkit-filter: hue-rotate(-360deg);
    }
}

linear-gradient線性漸變，以前是用到過，但是background-clip, text-fill-color, -webkit-filter: hue-rotate,這些屬性感覺好陌生，查閱相關資料后才進一步認識這些屬性，下面一步步來了解這些屬性吧。

• background-clip
• text-fill-color
• filter: hue-rotate

---

background-clip

CSS3 屬性 規定背景的繪制區域 W3school上面只展示了三個值 CSS3 background-clip 屬性

border-box       # 背景被裁剪到邊框盒。
padding-box       # 背景被裁剪到內邊距框。
content-box       # 背景被裁剪到內容框。

上面用到的-webkit-background-clip: text; 必須加上-webkit-前綴，不然瀏覽器不能正常渲染。text的效果就是背景顏色被剪裁到文字上面，只有文字會顯示背景顏色。這個屬性可以做類似ktv里面歌詞視圖的效果。具體效果參考 犀利的background-clip:text，實現K歌字幕效果

text-fill-color

text-fill-color,表示文字顏色填充，實現的效果基本上與color一樣，會覆蓋color所定義的字體顏色.也支持一個transparent屬性，也就是透明填充。

filter: hue-rotate

hue-rotate用來設置對象的色相旋轉。用0-360數字表達

結合以上三個屬性結合動畫，最終實現文字漸變的效果。

總結

隨着對CSS3越發的了解，深深的感受到CSS3的潛力越來越大，配合css3能夠輕松實現各種酷炫效果。當然瀏覽器兼容是個大問題。