svg文字描边动画

svg动画在网页中是常常见到的，svg动画使得网页看起来清新美观

任何不规则图形均可以由svg绘制完成，固然也包括文字，文字自己就能够看做一个不规则图形🐎

仍是按之前的流程，开始放代码前，先看效果：

很酷炫有木有？！！！

在我发现这个效果的时候，我以为碉堡了，直到我知道了它的代码

代码真的很简单，很简单。。。

咳咳。不扯了，如今进入正题

在使用网页作svg动画的时候首先咱们要有svg文件，这里我使用的是Ai来作svg文件

 

其实我感受Ai和PS真的好像，

 新建文件-->文字工具-->选本身喜欢的字体和大小

而后选菜单上的 文字-->建立轮廓

这样文字的轮廓就出来了，接下来用svg格式保存文件。

 

 

 

以后又会弹出一个窗口，无论它，直接用默认选项，点肯定就行

以后把svg文件导入到文本编辑器中（这里我用的是WebStorm）

 

导入后是这样的：

 

 

 

这些让人看着眼花缭乱的数字，就是Ai生成的文字的路径

咱们只须要path标签里的东西

 

新建一个html文件，建立一个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，在按时间顺序执行动画

 

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

 

效果以下：

效果很不错，代码很简单，只要学懂了，就能起到触类旁通的效果。