Using SVG + CSS for dynamic neon text effects

：

Principle: Multiple SVG stroke animations use different animation-delay!

For a shape SVG element or text SVG element, you can use Stroke-dasharray to control the stroke spacing style, and you can use Stroke-dashoffset to control the stroke offset, this can achieve the stroke animation effect, more specific information can see the big God "Pure CSS to achieve handsome SVG path stroke animation effect"

Let's start by implementing a simple text stroke animation:

<svgwidth= "100%"Height= "+">    <textText-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:310;Animation:stroke 6s Infinite linear;}@keyframes Stroke{100% {stroke-dashoffset:-400; }}

Demo Address: Http://output.jsbin.com/demic ...

We then use multiple stroke animations at the same time and set different animation-delay:

<svgwidth= "100%"Height= "+">    <textText-anchor= "Middle"x= "50%"y= "50%"class= "Text Text-1">segmentfault.com</text>    <textText-anchor= "Middle"x= "50%"y= "50%"class= "Text Text-2">segmentfault.com</text>    <textText-anchor= "Middle"x= "50%"y= "50%"class= "Text text-3">segmentfault.com</text>    <textText-anchor= "Middle"x= "50%"y= "50%"class= "Text text-4">segmentfault.com</text></svg> 

Note: How many colors to use, and how many text

. Text{font-size:64px;Font-weight:Bold;Text-transform:Uppercase;Fill:None;Stroke-width:2px;Stroke-dasharray: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; }}

Done, demo address: Http://output.jsbin.com/vuyuv ...

A few points to note:

1. The animation-delay of each element and the total length of the animation are coordinated
2. Stroke-dashoffset and Stroke-dasharray settings to coordinate

Turn from: 1190000010963326

Using SVG + CSS for dynamic neon text effects