瀏覽 animate.css官網 的時候發現animate.css這幾個字母的顏色會慢慢變化，個人覺得還是很有意思，本以為是利用animate改變color,結果f12後發現好多奇怪的css屬性。
先來看看我的實現方法
h2
@-webkit-keyframes hue
to }
css3的動畫屬性可以輕鬆改變文字的顏色，但是這裡有乙個小問題，就是動畫執行乙個輪迴結束後，顏色有乙個明顯變化過程。是因為動畫的結束後的最後一幀的顏色為#feab3a，立馬會重新執行動畫，顏色會初始到第一幀#f35626，所以會有明顯的變化。我們稍微改變一下動畫的寫法。
@-webkit-keyframes hue
to 100%
}
先看看animate的寫法
h2
@-webkit-keyframes hue
to }
linear-gradient線性漸變，以前是用到過，但是background-clip,text-fill-color,-webkit-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能夠輕鬆實現各種酷炫效果。當然瀏覽器相容是個大問題。
css3文字顏色漸變和文字陰影特效
這些效果只在webkit核心的瀏覽器才可以看到，其他瀏覽器需要新增一些回退 這和製作背景漸變效果是一樣的，只是將背景放到了文字上。下面是css cssh1 gradient mediascreenand webkit min device pixel ratio 0 html h1id gradie...
Css3 文字漸變整理（一）
一 文字顏色漸變 可以應用在所有接受影象的屬性上，允許使用簡單的語法實現顏色漸變，以便ua在渲染頁面自動生成影象。語法 linear gradient repeating linear gradient radial gradient repeating radial gradient 注意 必需在...
css3文字掃光漸變色
利用css3這個屬性 背景剪裁 background clip border box padding box context box no clip text 本次用到的就是 webkit background clip text 栗子 1 style masked webkit keyframes...