今天分享一下剛剛搞定的Logo變色功能的實現方法。
我的實現方法主要有兩個方面，利用CSS3動態漸變字體效果，實現起來已經非常成熟穩定，那logo是圖片怎麼辦，試過幾個方法都不行，於是想到，何不把logo轉換成字體，很完美呀！
我們的web經常會用到一些圖標，其實都是和字體一樣的（其實這裏我並沒有完全清楚），我感覺，字體也是圖片。
（1）準備工作，既然我們有logo了，肯定是矢量圖，然後導出SVG格式的圖片；
（2）字體制作，進入 https://icomoon.io 網站在線製作；
點擊 icomoon APP -> import icons 導入SVG圖片，
（3）點擊右下角的Generate Font生成字體文件，然後會出來Download按鈕，繼續點擊下載文件；
（4）解壓下載的包，會看到很多文件，這裏是一個demo，點擊demo.html文件，會看到圖標後面有一串字符：icon-loonlog-logo，這就是後面要使用的類名；
（6）把css和font文件夾拷貝到你的網站工程相應目錄，在html裏面直接使用即可了，本站就是用的此方法！
.logo{
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);
}
}
用到了這幾個屬性
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數字表達
結合以上三個屬性結合動畫，最終實現文字漸變的效果。