今天分享一下剛剛搞定的Logo變色功能的實現方法。
我的實現方法主要有兩個方面，利用CSS3動態漸變字體效果，實現起來已經非常成熟穩定，那logo是圖片怎麼辦，試過幾個方法都不行，於是想到，何不把logo轉換成字體，很完美呀！
SVG圖片轉換為Web字體圖標
我們的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> ;即可了，本站就是用的此方法！
css3文字顏色動態漸變
.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
- 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數字表達
結合以上三個屬性結合動畫，最終實現文字漸變的效果。
文章為用戶上傳，僅供非商業瀏覽。發布者：Lomu，轉轉請註明出處： https://www.daogebangong.com/zh-Hant/articles/detail/Use%20css3%20to%20achieve%20the%20effect%20of%20dynamic%20gradient%20of%20logo%20color.html
支付宝扫一扫 
评论列表（196条）
测试