svg動(dòng)畫在網(wǎng)頁(yè)中是經(jīng)常見(jiàn)到的，svg動(dòng)畫使得網(wǎng)頁(yè)看起來(lái)清新美觀

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

還是按以前的流程，開(kāi)始放代碼前，先看效果：

很酷炫有木有？！！！

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

代碼真的很簡(jiǎn)單，很簡(jiǎn)單。。。

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

在使用網(wǎng)頁(yè)做svg動(dòng)畫的時(shí)候首先我們要有svg文件，這里我使用的是Ai來(lái)做svg文件

?

其實(shí)我感覺(jué)Ai和PS真的好像，

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

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

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

?

?

?

之后又會(huì)彈出一個(gè)窗口，不管它，直接用默認(rèn)選項(xiàng)，點(diǎn)確定就行

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

?

導(dǎo)入后是這樣的：

?

?

?

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

我們只需要path標(biāo)簽里的東西

?

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

div的css樣式：

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

因?yàn)樵贏i建立的svg大小就是400*300，所以我這里也弄成一樣大小

svg樣式：

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

我給所有的path標(biāo)簽定了一個(gè)類名，叫word

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

接下來(lái)設(shè)置動(dòng)畫效果：
1 @keyframes draw { 2 0%{ 3 stroke-dashoffset: 500; 4 } 100% { 5 stroke-dashoffset: 0; 6 } 7 }

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

在path標(biāo)簽中添加如下屬性

fill-opacity="0" stroke="#FFF" stroke-width="1.5"
當(dāng)然也可以在css中設(shè)置

這樣一個(gè)文字描邊的動(dòng)畫就大功告成了
如果你想要用虛線描邊，就把stroke-dasharray設(shè)置小一點(diǎn)，比如我設(shè)置10
就看到這樣的效果：

如果你想要?jiǎng)赢嬘肋h(yuǎn)進(jìn)行下去
animation: draw 8s linear forwards;

把forwards設(shè)置成infinite就可以一直重復(fù)動(dòng)畫了

一般svg動(dòng)畫都需要配合javascript一起使用的，比如stroke-dashoffset因?yàn)槲也恢谰唧w輪廓長(zhǎng)度，就只設(shè)成500甚至更多，那么在javascript中是可以獲取輪廓長(zhǎng)度的

1 path.getTotalLength();

這個(gè)方法就可以獲取字母的輪廓長(zhǎng)度。

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

你想要把字母一個(gè)個(gè)按順序畫出來(lái)？也可以：

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

?

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;}

?

效果如下：

效果很不錯(cuò)，代碼很簡(jiǎn)單，只要學(xué)懂了，就能起到舉一反三的效果。

轉(zhuǎn)載于:https://www.cnblogs.com/FrankLongger/p/9650781.html

總結(jié)

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

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