html霓虹灯文字效果,使用SVG + CSS实现动态霓虹灯文字效果

JS Bin

html,body{

height: 100%;

margin: 0;

padding: 0;

background: #2c3e50;

}

.wrapper{

margin-top: 80px;

}

.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;

}

}

MassLook.com

segmentfault.com

segmentfault.com

segmentfault.com