炫酷的霓虹灯闪烁用纯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>