【實例簡介】

【實例截圖】

【核心代碼】

使用SVG CSS實現動態霓虹燈文字效果

#svgBox{[/b] width:100%;

margin:100px auto;

}

.text{

font-size: 64px;

font-weight: bold;

text-transform: uppercase;

fill: none;

stroke-width: 2px;

stroke-dasharray: 90 310;

animation: stroke 6s infinite linear;

}

.text-1{

stroke: #3498db;

text-shadow: 0 0 5px #3498db;

animation-delay: -1.5s;

}

.text-2{

stroke: #f39c12;

text-shadow: 0 0 5px #f39c12;

animation-delay: -3s;

}

.text-3{

stroke: #e74c3c;

text-shadow: 0 0 5px #e74c3c;

animation-delay: -4.5s;

}

.text-4{

stroke: #9b59b6;

text-shadow: 0 0 5px #9b59b6;

animation-delay: -6s;

}

@keyframes stroke {

100% {

stroke-dashoffset: -400;

}

}

.svgText{

width:600px;

margin:0 auto;

}

.svgText h3{

font-size:18px;

color:#333;

line-height:2;

}

.svgText p{

font-size:16px;

color:#888;

line-height:2;

}

.svgText p a,.svgText p a:hover{

color:#01a6fc;

font-weight:600;

}

.svgText ul li{

font-size:16px;

color:#888;

line-height:2;

}

好例子網歡迎您

好例子網歡迎您

好例子網歡迎您

好例子網歡迎您

總結

以上是生活随笔為你收集整理的html霓虹灯效果图,HTML5 SVG+CSS3霓虹灯文字边框动画特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。