炫酷线条动画--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本身来实现，自己大胆摸索吧；

 

 

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

 

 

 

自己新开发了一个小程序，求关注，求分享