css3 svg霓虹燈文字特效

使用SVG + CSS3實(shí)現(xiàn)動(dòng)態(tài)霓虹燈文字走馬燈效果代碼。

實(shí)現(xiàn)原理：

對(duì)于一個(gè)形狀SVG元素或文本SVG元素，可以使用stroke-dasharray來(lái)控制描邊的間隔樣式，并且可以用stroke-dashoffset來(lái)控制描邊的偏移量，借此可以實(shí)現(xiàn)描邊動(dòng)畫(huà)效果。本案例中，多個(gè)SVG描邊動(dòng)畫(huà)使用不同的animation-delay即可實(shí)現(xiàn)。

需要注意的幾個(gè)點(diǎn)

各個(gè)元素的animation-delay與animation的總時(shí)長(zhǎng)的設(shè)置要協(xié)調(diào)

stroke-dashoffset與stroke-dasharray的設(shè)置要協(xié)調(diào)

使用聲明

1. 本站所有素材（未指定商用），僅限學(xué)習(xí)交流。
2. 會(huì)員在本站下載的原創(chuàng)商用和VIP素材后，只擁有使用權(quán)，著作權(quán)歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材，未經(jīng)合法授權(quán)，請(qǐng)勿用于商業(yè)用途，會(huì)員不得以任何形式發(fā)布、傳播、復(fù)制、轉(zhuǎn)售該素材，否則一律封號(hào)處理。
4. 本平臺(tái)織夢(mèng)模板僅展示和個(gè)人非盈利用途，織夢(mèng)系統(tǒng)商業(yè)用途請(qǐng)預(yù)先授權(quán)。

查看演示下載資源

141 5230 12