微信掃碼登錄 ×
當(dāng)前位置 :首頁 > 代碼 > html5 css3 > css3實例 > css3 svg霓虹燈文字特效
代碼
css3 svg霓虹燈文字特效

css3 svg霓虹燈文字特效

收藏
css3 svg霓虹燈文字特效
使用SVG + CSS3實現(xiàn)動態(tài)霓虹燈文字走馬燈效果代碼。

實現(xiàn)原理：


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

需要注意的幾個點


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

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

使用聲明

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

x
×
×

注冊

QQ注冊 立即下載 微信注冊 立即下載

簽到成功!

已連續(xù)簽到1天，連續(xù)簽到3天可獲得50積分

知道了