用CSS可以寫出漂亮的動畫。直接上例子。
SVG動畫 文字標題
SVG 線條動畫基礎入門知識
button垂直水平居中、shape透明填充,邊框?qū)挾?px,邊框顏色#1199ff。
也許你會對fill、stroke-width等屬性有點懵,下面看看他們的描述:
fill:類比 css 中的 background-color,給 svg 圖形填充顏色;
stroke-width:類比 css 中的 border-width,給 svg 圖形設定邊框?qū)挾龋?/p>
stroke:類比 css 中的 border-color,給 svg 圖形設定邊框顏色;
stroke-linejoin | stroke-linecap:設定線段連接處的樣式;
stroke-dasharray:值是一組數(shù)組,沒數(shù)量上限,每個數(shù)字交替表示劃線與間隔的寬度;
stroke-dashoffset:則是劃線與間隔的偏移量
重點能夠?qū)崿F(xiàn)線條動畫的關鍵屬性 stroke-dasharray 。屬性 stroke-dasharray 可控制用來描邊的點劃線的圖案范式。