就像是一圈圈蚂蚁在它身上爬。。。。。emmmmm奇特的比喻
fill:none;可以让图形不被填充，如果不添加这一属性，则默认填充颜色是black，这个效果
发现stroke这一系列属性都很有意思啊，填充啊透明度和stroke-linecap，但是这个效果用的最多的还是stroke-dasharray和stroke-dashoffset。
stroke-miterlimit 表示描边相交（锐角）的表现方式。默认大小是4. 什么斜角转斜面的角度损耗之类的意思，值越大，损耗越小。具体干嘛的，我自己也不确定。大家可查查其他资料。
stroke-dasharray 表示虚线描边。可选值为：none, 95c67b0134a361fe5a4d132d6fc3c1ee, inherit. 其中，none表示不是虚线；95c67b0134a361fe5a4d132d6fc3c1ee为一个逗号或空格分隔的数值列表。表示各个虚线端的长度。可以是固定的长度值，也可以是百分比值；inherit表继承。
stroke-dashoffset 表示虚线的起始偏移。可选值为：42c97a047d75abc12b9b351eb8562711, d82af2074b26fcfe177e947839b5d381, inherit. 百分比值，长度值，继承。
stroke-opacity 表示描边透明度。默认是1.
特别佩服作者列举的一个生动形象的例子：
一根火腿肠12厘米，要在上面画虚线，虚线间隔有15厘米，如果没有dashoffset，则火腿肠前面15厘米会被辣椒酱覆盖！实际上只有12厘米，因此，我们看到的是整个火腿肠都有辣椒酱。现在，dashoffset也是15厘米，也就是虚线要往后偏移15厘米，结果，辣椒酱要抹在火腿肠之外，也就是火腿肠上什么辣椒酱也没有。如果换成上面的直线svg，也就是直线看不见了。我们把dashoffset值逐渐变小，则会发现，火腿肠上的辣椒酱一点一点出现了，好像辣椒酱从火腿肠根部涂抹上去一样。
<style type="text/css"> body{background-color:#00688b; } .text{font-size: 64px; font-weight: normal; text-transform: uppercase; fill:none; stroke: #b0e0e6; stroke-width: 2px; stroke-dasharray: 90 310; animation: stroke 6s infinite linear; } .text-1{stroke: #ffec8b; animation-delay:-1.5s; text-shadow:5px 5px 5px #ffec8b; } .text-2{stroke:#aeeeee; animation-delay:-3s; text-shadow:5px 5px 5px #7fffd4; } .text-3{stroke:#eee0e5;animation-delay:-4.5s;text-shadow:5px 5px 5px #7fffd4; } .text-4{stroke:#ffc1c1;animation-delay:-6s;text-shadow:5px 5px 5px #7fffd4; } @keyframes stroke { to { stroke-dashoffset: -400;}} </style> <svg width="100%" height="100"> <text text-anchor="middle" x="50%" y="50%" class="text text-1" > happy birthday to you❤ </text> <text text-anchor="middle" x="50%" y="50%" class="text text-2" > happy birthday to you❤</text> <text text-anchor="middle" x="50%" y="50%" class="text text-3" > happy birthday to you❤ </text> <text text-anchor="middle" x="50%" y="50%" class="text text-4" > happy birthday to you❤ </text> </svg>
以上就是svg霓虹灯效果 的详细内容。