炫酷线条动画--svg

　　咱们常常能够在一些页面看到看起来很酷的线条动画，有些能够用css实现，有些css就无能为力了，今天来研究另外一种实现方式，svg

　　若是对svg是什么还不了解的话，能够先去看看svg的基础教程；

　　通常对于复杂的线条，不提倡本身去手动画，而应该借助illustrator之类的绘图软件生成后保存位svg文件

 

　　 svg作线条动画的主要方式使用stroke-dasharray,stroke-dashoffset来实现；　

1. stroke-dasharray：它是一个<length>和<percentage>数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。若是提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。所以，5,3,2等同于5,3,2,5,3,2；
2. stroke-dashoffset：标识的是整个路径的偏移值；
3. 具体你们能够拖动下面input感觉下，动画效果咱们能够经过js，css3 animation 及svg自己来实现，本身大胆摸索吧；

 

 

虚线长度   虚线间隔   总体偏移  

 

 

 

本身新开发了一个小程序，求关注，求分享