Using SVG + CSS to achieve dynamic neon text effect

In the morning, I accidentally entered a website to see their LOGO effect, as shown in the figure:

At first, I thought it was gif animation and so on. After reviewing the elements, I found that it was actually implemented by SVG + CSS3 animation, which immediately aroused my desire. I decided to explore it. After looking at the code, I found that the principle was so simple: multiple SVG tracing animations use different animation delay!

For a shape SVG element or text SVG element, stroke dasharray can be used to control the stroke interval style, and stroke dashffset can be used to control the stroke offset, so that the stroke animation effect can be realized. For more specific information, you can see Zhang Dashen's< Pure CSS to achieve the cool SVG path tracing animation effect>

We first realize a simple text stroke Animation:

<svg width="100%" height="100">
    <text text-anchor="middle" x="50%" y="50%" class="text">
        segmentfault.com
    </text>
</svg> 
.text{
    font-size: 64px;
    font-weight: bold;
    text-transform: uppercase;
    fill: none;
    stroke: #3498db;
    stroke-width: 2px;
    stroke-dasharray: 90 310;
    animation: stroke 6s infinite linear;
}
@keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

Demo address: http://output.jsbin.com/demic...

Then we use multiple stroke animations at the same time and set different animation delay:

<svg width="100%" height="100">
    <text text-anchor="middle" x="50%" y="50%" class="text text-1">
        segmentfault.com
    </text>
    <text text-anchor="middle" x="50%" y="50%" class="text text-2">
        segmentfault.com
    </text>
    <text text-anchor="middle" x="50%" y="50%" class="text text-3">
        segmentfault.com
    </text>
    <text text-anchor="middle" x="50%" y="50%" class="text text-4">
        segmentfault.com
    </text>
</svg> 

Note: put as many text as you want to use

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

Successful, demo address: http://output.jsbin.com/vuyuv...

Several points need to be noted:

1. The setting of animation delay and total duration of animation of each element should be coordinated
2. The settings of stroke dashffset and stroke dasharray should be coordinated

https://segmentfault.com/a/1190000010963326

Tags: css3

Posted on Sun, 03 May 2020 01:16:18 -0700 by gewthen