神奇的SVG動(dòng)畫(huà)
時(shí)間：2023-03-02 訪(fǎng)問(wèn)量：0
用CSS可以寫(xiě)出漂亮的動(dòng)畫(huà)。直接上例子。
SVG動(dòng)畫(huà)
文字標(biāo)題
SVG 線(xiàn)條動(dòng)畫(huà)基礎(chǔ)入門(mén)知識(shí)
button垂直水平居中、shape透明填充，邊框?qū)挾?px，邊框顏色#1199ff。
也許你會(huì)對(duì)fill、stroke-width等屬性有點(diǎn)懵，下面看看他們的描述：
fill：類(lèi)比 css 中的 background-color，給 svg 圖形填充顏色；
stroke-width：類(lèi)比 css 中的 border-width，給 svg 圖形設(shè)定邊框?qū)挾龋?/p>
stroke：類(lèi)比 css 中的 border-color，給 svg 圖形設(shè)定邊框顏色；
stroke-linejoin | stroke-linecap：設(shè)定線(xiàn)段連接處的樣式；
stroke-dasharray：值是一組數(shù)組，沒(méi)數(shù)量上限，每個(gè)數(shù)字交替表示劃線(xiàn)與間隔的寬度；
stroke-dashoffset：則是劃線(xiàn)與間隔的偏移量
重點(diǎn)能夠?qū)崿F(xiàn)線(xiàn)條動(dòng)畫(huà)的關(guān)鍵屬性 stroke-dasharray 。屬性 stroke-dasharray 可控制用來(lái)描邊的點(diǎn)劃線(xiàn)的圖案范式。
