使用 SVG + CSS 实现动态霓虹灯文字效果
「React 开发者」优达学城硅谷大学，提供Airbnb、Netflix 的前端内容，中文项目审阅，立即抢座 >>>
早上无意间进入一个网站，看到他们的LOGO效果略屌，如图： [图片上传失败...(image-df60b3-1512696500160)]
刚开始以为是gif动画之类的，审查元素发现居然是用SVG + CSS3动画实现的，顿时激起了我的(hao)欲(qi)望(xin)，决定要一探究竟，查看代码之后，发现原理居然是如此简单：多个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…
[图片上传失败...(image-6e1814-1512696500159)]
需要注意的几个点：
- 各个元素的animation-delay与animation的总时长的设置要协调
- stroke-dashoffset与stroke-dasharray的设置要协调
