炫酷的霓虹灯

炫酷的霓虹灯闪烁用纯CSS实现

许嵩在《白马非马》中唱道：万家灯火带领星光拼出个晚上…闭上眼睛，想象着走在繁华城市的街头，霓虹灯闪烁，多么美丽的场景！

  那么我们如何用纯css实现一个简单的霓虹灯效果呢？

  我们先来预览一下效果：

  这里需要用到我们HTML的svg标签，svg运用到HTML中对描述二维图形和绘图有着非常大的作用。常见的我们可以用它来绘制圆形、椭圆、矩形等多边形，它比我们用传统的css实现画图更为简单，且更加语义化(比如用svg画圆，只需要定义圆心坐标及半径即可)

谷歌Chrome，火狐，Internet Explorer9及以上，和Safari才支持把SVG代码直接嵌入到HTML代码中哦！

首先我们需要把基本文字搭建好，细心的小伙伴可以发现，demo上文字的颜色其实是四种颜色在交替出现，所以需要四层文字：

<svg width="100%" height="400" xmlns="http://www.w3.org/2000/svg">
        <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>

接下来就是要让文字闪烁起来了

  很容易想到用animation实现动画效果，但是要实现文字像毛毛虫一样移动的效果，就还得用到两个属性:stroke-dasharray,以及stroke-dashoffset。

stroke-dasharray

  它的参数是由一个数组组成，分别表示实线和虚线的长度，怎么理解？

  假设有一个线段长度为20

• stroke-dasharray有奇数个参数时，
  • stroke-dasharray: 5; 会自动复制一份，所以会出现实线为5，虚线为5交替出现
  • stroke-dasharray:2 4 3; 同样的也会自动复制一份,效果为：实线2，虚线4，实线3，虚线2，实线4，虚线3 …
• stroke-dasharray有偶数个参数时，
  • 实线虚线交替出现

  直到线段被实线和虚线占满

stroke-dashoffset

  相对于绘制的起点偏移的量，正值(向右或者顺时针偏移)，负值(向左或者逆时针)

具体的可以去看看大佬关于stroke-dasharray和stroke-dashoffset更深刻的理解:

SVG：理解stroke-dasharray和stroke-dashoffset属性.

最后只需要将偏移属性stroke-dashoffset设置进动画里就几乎odk了

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

需要注意的是:stroke-dasharray实线和虚线的长度刚好是stroke-dashoffset的值

但是我们发现给文字设置四种颜色后，仍然没有实现我们想要的效果

原因是每层文字都是同时进行闪烁的，最外层把层级低的文字效果覆盖了，只需要让他们延迟不同的时间闪烁就可以了。

这样一个简单但很炫酷的霓虹灯就实现啦！想玩玩看的小伙伴可以玩一下哦！

• css部分

        * {
            margin: 0;padding: 0;
        }
        .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;
            }
        }
        .text-1 {
            animation-delay: -1.5s;
            stroke: #3498db;
            text-shadow: 0 0 5px #3498db;
        }
        .text-2 {
            animation-delay: -4.5s;
            stroke: #f39c13;
            text-shadow: 0 0 5px #f39c13;
        }
        .text-3 {
            animation-delay: -6s;
            stroke: #e74c3c;
            text-shadow: 0 0 5px #e74c3c;
        }
        .text-4 {
            animation-delay: -3s;
            stroke: #9b59b6;
            text-shadow: 0 0 5px #9b59b6;
        }

• html部分

    <svg width="100%" height="400" xmlns="http://www.w3.org/2000/svg">
        <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>