jpg圖片轉換成svg文字路徑動畫的實例（附程式碼）

這篇文章帶給大家的內容是關於jpg圖片轉換成svg文字路徑動畫的實例（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

最近對svg動畫很有興趣，用svg css可以實現一些讓人眼前一亮的效果，Ant Design 官網首屏就出現了svg動畫，coding 官網首頁也出現svg動畫，也許在非前端人員看來效果很普通，但是在前端開發人員眼裡，這種效果低調又張揚！這和你做的jq animate動畫一比較，高下判定！你還要說什麼？

能做成Ant Design那樣的動畫效果是我的目標，我想先做個簡單點的效果，譬如這樣的文字描邊動畫效果

怎麼做的呢？

這張jpg是我的頭像，最終呈現的效果就是以這張圖為基礎。

首先要在PS中將圖的選取範圍轉換成路徑

再將帶路徑的ps檔匯出到Ai

#需要注意的是，第二個字母的路徑由兩部分組成，外層一個大選區，裡面一個小的選區，這裡要選“視窗”→“路徑查找器”，形狀模式選“差集”。

儲存成svg格式，得到了程式碼：

將css修改一下

.st0{fill: none;    
stroke-width:2;    
stroke:#30479B;    
stroke-linejoin:round;    
stroke-linecap:round;    
stroke-dasharray: 250, 250;    
animation: lineMove 5s ease-out infinite;    
}
@keyframes lineMove {
    0%{        
    stroke-dasharray: 0, 250;    
    }
    100%{        
    stroke-dasharray: 250, 250;    
    }
    }

關於svg和css結合，以本範例為參考：
- fill 表示填滿顏色，值是none表示沒有顏色
- stroke 是邊框的顏色
- stroke-width 定義邊框的厚度
- stroke-dasharray 這個屬性第一個參數定義了邊框虛線長度，第二個參數是虛線的間距，什麼是“邊框虛線”，你可以認為邊框本來就是虛線而不是實線，只不過虛線的間距為0，看起來就像是實線了。
- 這裡用到了css3的@keyframes特性，將過渡動畫控制stroke-dasharray 樣式。

最終整體程式碼如下

相關文章推薦：

svg中的symbol如何製作icon

SVG畫圖功能：svg實作畫出一朵花（附程式碼）

以上是jpg圖片轉換成svg文字路徑動畫的實例（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！