svg動畫在網(wǎng)頁中是經(jīng)常見到的，svg動畫使得網(wǎng)頁看起來清新美觀

任何不規(guī)則圖形都可以由svg繪制完成，當然也包括文字，文字本身就可以看作一個不規(guī)則圖形?

還是按以前的流程，開始放代碼前，先看效果：

很酷炫有木有？！！！

在我發(fā)現(xiàn)這個效果的時候，我覺得碉堡了，直到我知道了它的代碼

代碼真的很簡單，很簡單。。。

咳咳。不扯了，現(xiàn)在進入正題

在使用網(wǎng)頁做svg動畫的時候首先我們要有svg文件，這里我使用的是Ai來做svg文件

?

其實我感覺Ai和PS真的好像，

?新建文件-->文字工具-->選自己喜歡的字體和大小

然后選菜單上的 文字-->創(chuàng)建輪廓

這樣文字的輪廓就出來了，接下來用svg格式保存文件。

?

?

?

之后又會彈出一個窗口，不管它，直接用默認選項，點確定就行

之后把svg文件導入到文本編輯器中（這里我用的是WebStorm）

?

導入后是這樣的：

?

?

?

這些讓人看著眼花繚亂的數(shù)字，就是Ai生成的文字的路徑

我們只需要path標簽里的東西

?

新建一個html文件，創(chuàng)建一個div里面包著svg，svg里面包著我們獲得的path標簽

div的css樣式：

1 width: 400px; 2 height: 300px; 3 margin: 0 auto;

因為在Ai建立的svg大小就是400*300，所以我這里也弄成一樣大小

svg樣式：

1 width: 400px; 2 height: 300px;

我給所有的path標簽定了一個類名，叫word

1 .word { 2 stroke-dasharray: 500; 3 animation: draw 8s linear forwards; 4 } stroke-dasharray表示虛線的長度，我這里設的是五百的長度，但一個字母的邊框長度顯然沒有五百，所以看到的也就是實線

接下來設置動畫效果：
1 @keyframes draw { 2 0%{ 3 stroke-dashoffset: 500; 4 } 100% { 5 stroke-dashoffset: 0; 6 } 7 }

stroke-dashoffset表示繪制點距離起點的距離，由于我不知道字母的寬度，這里我直接用500代替，從500到0，就畫出了整個字母邊框，

在path標簽中添加如下屬性

fill-opacity="0" stroke="#FFF" stroke-width="1.5"
當然也可以在css中設置

這樣一個文字描邊的動畫就大功告成了
如果你想要用虛線描邊，就把stroke-dasharray設置小一點，比如我設置10
就看到這樣的效果：

如果你想要動畫永遠進行下去
animation: draw 8s linear forwards;

把forwards設置成infinite就可以一直重復動畫了

一般svg動畫都需要配合javascript一起使用的，比如stroke-dashoffset因為我不知道具體輪廓長度，就只設成500甚至更多，那么在javascript中是可以獲取輪廓長度的

1 path.getTotalLength();

這個方法就可以獲取字母的輪廓長度。

什么？你不想要這種效果？

你想要把字母一個個按順序畫出來？也可以：

只要給每個path定一個id，在按時間順序執(zhí)行動畫

?

1 #st0{animation: draw 2s ease forwards;} 2 #st1{animation: draw 2s ease .5s backwards;} 3 #st2{animation: draw 2s ease 1s backwards;} 4 #st3{animation: draw 2s ease 1.5s backwards;} 5 #st4{animation: draw 2s ease 2s backwards;} 6 #st5{animation: draw 2s ease 2.5s backwards;} 7 #st6{animation: draw 2s ease 3s backwards;} 8 #st7{animation: draw 2s ease 3.5s backwards;} 9 #st8{animation: draw 2s ease 4s backwards;}

?

效果如下：

效果很不錯，代碼很簡單，只要學懂了，就能起到舉一反三的效果。

轉載于:https://www.cnblogs.com/FrankLongger/p/9650781.html

總結

以上是生活随笔為你收集整理的svg文字描边动画的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。