炫酷線條動畫--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自己來實現，本身大膽摸索吧；

 

 

虛線長度   虛線間隔   總體偏移  

 

 

 

本身新開發了一個小程序，求關注，求分享