html霓虹灯效果图,HTML5 SVG+CSS3霓虹灯文字边框动画特效

【实例简介】

【实例截图】

【核心代码】

使用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;

}

好例子网欢迎您

好例子网欢迎您

好例子网欢迎您

好例子网欢迎您