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;
    }
    50% {
        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數字表達

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

透明度漸變

.maskImage {
  color: red;
  height: 600px;
  //background: black;
  -webkit-mask-image: -webkit-gradient(linear,center top,center bottom,color-stop(0,transparent),color-stop(.3,#000),color-stop(1,#000));
  }

總結

隨着對CSS3愈加的瞭解，深深的感覺到CSS3的潛力愈來愈大，配合css3可以輕鬆實現各類酷炫效果。固然瀏覽器兼容是個大問題。