今天分享一下剛剛搞定的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裡面直接使用<i class="icon-loonlog-logo" style="font-size: 150px"></i>即可了，本站就是用的此方法！

.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:hue6sinfinitelinear; } @-webkit-keyframeshue{ from{ -webkit-filter:hue-rotate(0deg); } to{ -webkit-filter:hue-rotate(-360deg); } }

以上即可對字體進行顔色動态漸變了，具體我也是直接拷貝！

用到了這幾個屬性

• 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數字表達

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

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部