效果图：
原理：多个SVG描边动画使用不同的animation-delay即可！
对于一个形状SVG元素或文本SVG元素，可以使用stroke-dasharray来控制描边的间隔样式，并且可以用stroke-dashoffset来控制描边的偏移量，借此可以实现描边动画效果，更具体的资料可以看看张大神的《纯CSS实现帅气的SVG路径描边动画效果》
我们先实现一个简单的文字描边动画：
<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; ?}}演示地址：http://output.jsbin.com/demic...
然后我们同时使用多个描边动画，并设置不同的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>
注意：要使用多少种颜色，就放多少个text
.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; ?}}大功告成，演示地址：http://output.jsbin.com/vuyuv...
需要注意的几个点：
- 各个元素的animation-delay与animation的总时长的设置要协调
- stroke-dashoffset与stroke-dasharray的设置要协调
转自：https://segmentfault.com/a/1190000010963326
使用SVG + CSS实现动态霓虹灯文字效果
原文地址：http://www.cnblogs.com/sghy/p/7473249.html