堕落糜烂的光芒-CSS+SVG实现霓虹灯效果

时间 2019-11-21

标签堕落糜烂光芒 css+svg css svg 实现霓虹灯效果栏目 CSS 繁體版

原文原文链接

1、往事

几年前，我有幸出差到东莞，在市中心一个85元一晚的小旅馆里面，我很激动。我像个没见过世面的孩子，看着窗外闪亮的霓虹灯招牌，心情久久不能平复。那灯红酒绿的景色，像那神秘的漩涡，把我吸进去了。我舔了舔嘴唇，从门缝下拾起一张名片，拨打了一个从未打过的电话......css

--------------------------------强行分割线--------------------------git

2、搞下字

在开始前，咱们要先想下，霓虹灯的特色是什么。我在东莞的时候因为上面供血不足，只想到了两条，一是要有字，二是要发光。咱们先把字弄出来。github

body {
            background: #000000;
            margin: 0;
            font-family: Helvetica, sans-serif;
            overflow: hidden;
        }

        .texta-front {
            font-family: YouYuan;
            font-size: 64px;
            font-weight: normal;
            text-transform: uppercase;
            fill: #db94f7;
        }

<svg width="600" height="250">
        <text text-anchor="middle" x="30%" y="50%" class="texta-front">
            巴黎の玫瑰
        </text>
</svg>复制代码

为了体现霓虹灯的光芒，我特意把背景改为黑色，字使用的是svg的text，用到属性以下：bash

text-anchor:文本锚点属性，被用来描述该文本与所给点的对齐方式 (开头、中间、末尾对齐) 。
x,y:表示当前元素针对svg的相对位置的X,Y坐标，能够用百分比表示。
class：能够直接在css里面设置属性，而后用class方式引进到svg里面，很是方便

咱们再看css，我为了体现霓虹灯的效果，特意选了细长的字体，这里为了能让大多数人看到，选了装了office就有的幼圆字体。弄完后的效果是这样的网络

好像离完成还有很远的距离

显然，这样是不行的，不发光，这就是个普通的文字而已，开始发光吧。svg

.texta-front {
            font-family: YouYuan;
            font-size: 64px;
            font-weight: normal;
            text-transform: uppercase;
            stroke: #db94f7;
            stroke-width: 2px;
            text-shadow: 0px 0px 10px #e2b2f5;
        }复制代码

这里我把text-shadow的阴影特效加上去了，为了强化霓虹灯的效果，我把文字的填充（fill）换成了stroke。关于stroke，这里说明一下：字体

stroke:设置绘制对象的线条的颜色。这里我用来作描边。
stroke-width:描边的线条粗细。

其实stroke还有其余做用，待会咱们会用到。最后的效果是这样的。url

这个特效有点靠谱了

3、搞个框

为了避免显得单调，我决定给字加个框。spa

.rect-front {
            stroke: #07eb93;
            stroke-width: 5;
            box-shadow: 0px 0px 10px #07eb93;/*无效，text-shadow也无效 */
        }
<svg width="600" height="250" >
            <rect x="7%" y="25%" rx="30" ry="30" width="340" height="90" fill-opacity="1" class="rect-front" />
                <text text-anchor="middle" x="35%" y="50%" fill-opacity="1" class="texta-front">
                    巴黎の玫瑰
                </text>
    </svg>复制代码

由于咱们只须要框，不须要填充，因此仍是用了stroke，结果以下：3d

没有光，啥玩意

很不幸，这个翠绿的框居然没有光，看了不管是text-shadow仍是box-shadow对rect都毫无效果，看来简单的配置就能搞定的时代已通过去了，我只能另想办法了，徒手把光给发出来！

.rect-front {
            stroke: #07eb93;
            stroke-width: 2;
        }
        .rect-back {
            stroke-width: 4;
            filter:url(#filter-blur);
        }

<svg width="600" height="250" >
            <filter id="filter-blur">
                    <feGaussianBlur in="SourceGraphic" stdDeviation="4" />
            </filter>
            <rect x="7%" y="25%" rx="30" ry="30" width="340" height="90" fill-opacity="1" class="rect-front rect-back" />
            <rect x="7%" y="25%" rx="30" ry="30" width="340" height="90" fill-opacity="0" class="rect-front" />
                ......
    </svg>复制代码

以前看过我作云的朋友知道，svg的filter是个好东西，这里我用的就是高斯模糊滤镜（feGaussianBlur ），把模糊后的效果做为底部，上面再铺一层清晰的框，这样，一个发出翠绿光芒的框就出来了，另外，我把前面框的fill-opacity设置成0，是为了让上面的这层rect透明（stroke是不受fill-opacity影响的，不会透明化），方便底下的模糊光能够看的到。最后看到的效果就是这样的

这样看起来有点靠谱了，但看相貌也是平平无奇啊，何须费这功夫写这么多字呢。但这种完美的霓虹灯怎么能入个人法眼，在那神奇的霓虹灯中，总有那损坏的部分更吸引人，好比这种：

是的，没有残缺的霓虹灯是不完整的（本篇金句），因此我决定把霓虹灯颓废的一面表现出来。

4、残缺美

在一个漆黑的巷子里面，一间破旧的酒吧，门口的招牌由于年久失修，招牌已经破损，灯也变的有的亮有的不亮了，里面的老板是一个胡子拉碴的中年男人，他一开口，就用沧桑的口气说：“当年我出差到东莞的时候，一时没忍住..."

--------------------------------再次强行分割线--------------------------

为了达到残缺破损的效果，我用了两样东西，一是旋转，二是破损。先看简单的，旋转效果。

<text text-anchor="middle" x="39%" y="50%" fill-opacity="1" rotate="0 0 0 0 40"class="texta-front">
                    巴黎の玫瑰
</text>复制代码

这里用上了rotate，它的规则以下：

rotate参数值是一个数列，用来规定旋转的度数，单位能够省略，默认是deg。

字符应用角度规则：

（1）.若是只有一个参数，全部文本都旋转同一个角度。

（2）.若是规定多个参数，第一个参数用于第一个字符，第二个参数用于第二个字符，以此类推。

效果以下：

下面咱们还须要搞定破损，既然瑰字都歪斜了，天然电源的接触也很差，那就让它继续破损吧。顺便把这个绿框也搞搞破坏。

.textb-front {
            font-family: YouYuan;
            font-size: 64px;
            font-weight: normal;
            text-transform: uppercase;
            stroke: #723c88;
            stroke-width: 2px;
            stroke-dasharray: 180 280;
            text-shadow: 0px 0px 3px #332638;
        }

        .rect-front {
            stroke: #07eb93;
            stroke-width: 2;
            stroke-dasharray: 180 100;
        }

......
<text text-anchor="middle" x="35%" y="50%" fill-opacity="1" class="texta-front">
                    巴黎の玫
                </text>
                <text text-anchor="middle" x="62%" y="50%" fill-opacity="1" rotate="40" class="textb-front">
                        瑰
                </text>复制代码

这里的关键是stroke-dasharray，它可控制用来描边的点划线的图案范式。它的值是一个数列，通常成对出现，第一个值表示线的长度，第二个值表示缺口的长度，反正我是谁便试，看着合适就行。另外把“瑰”的颜色调深，看着比较像供电不足，最后的效果以下

5、来个图吧

到目前为止，咱们都试围绕着字和规则图形来的，但霓虹灯的世界难道只有呆板的文字和形状吗，不，我拒绝。既然试巴黎的玫瑰，没有巴黎也就算了，连玫瑰也没有就太寒酸了，我决定把玫瑰加上去。但普通的图片确定不行，既然是svg的文章，天然要来张svg的图片。SVG的图片，我想到了马云。

阿里巴巴矢量图标库，你值得拥有，有大量的图标，均可以用多种格式下载，我选了一朵玫瑰，下载成svg的格式

什么是svg图，我抄一段吧，详细的请自行查阅

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的状况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个总体

它在内容是这样子的

所有的代码太长，我就截个图意思一下吧。我一样经过X,Y的参数挪到合适的位置，效果是这个样子。

但这个玫瑰不发光，算什么霓虹灯，我又开始了发光了。

.svg-font1 {
            fill:none;
            stroke: red;
            stroke-width: 10;
            stroke-dasharray: 880 330;
        }
        .svg-font2 {
            fill:none;
            stroke: yellow;
            stroke-width: 10;
            stroke-dasharray: 700 1030;
        }
        .svg-font3 {
            fill:none;
            stroke: gold;
            stroke-width: 10;
        }
        .svg-font4 {
            fill:none;
            stroke: rgb(243, 40, 165);
            stroke-width: 10;
        }
        .svg-font5 {
            fill:none;
            stroke: rgb(7, 252, 117);
            stroke-width: 10;
        }
        .svg-back {
            filter: url(#filter-blur-svg);
        }
...
<filter id="filter-blur-svg">
                <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
...
<svg x="60%" y="0%" t="1562754342698" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="1277" width="128" height="128" fill="1">
            <path class="svg-font1 svg-back" ...
            <path class="svg-font3 svg-back" ...
            <path class="svg-font2 svg-back" ...
            <path class="svg-font4 svg-back" ...
            <path class="svg-font5 svg-back" ...
            <path class="svg-font5 svg-back" ...
            <path class="svg-font5 svg-back" ...
             <path class="svg-font5 svg-back" ...
</svg>
<svg x="60%" y="0%" t="1562754342698" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="1277" width="128" height="128" fill="1">
            <path class="svg-font1" ...
            <path class="svg-font3" ...
            <path class="svg-font2" ...
            <path class="svg-font4" ...
            <path class="svg-font5" ...
            <path class="svg-font5" ...
            <path class="svg-font5 ... <path class="svg-font5 svg-back" ... </svg>复制代码

须要说明的是，svg标签里面可使用filter="url(#filter_id)"这种方式，直接使用filter，但class="classname"是无效的，但path标签是可使用的。我就是用一层svg的path使用高斯模糊（feGaussianBlur ）做为发光的效果，在上面铺上一层图做为灯光本体，再把颜色改变一下，效果就出来了。而后再次请出stroke-dasharray，给玫瑰花也作出一些缺陷美，就完成了。最后的效果以下：

6、往事-续篇

正在我如痴如醉的撸代码的时候，一阵敲门声传来，一个娇滴滴的声音在旅馆房间的门外传来，“靓仔，是你要的客房服务吗？”。我赶紧开门，急促的说道：“快，快进来，关门”。把人拉进来后，我急忙关上灯，继续拉着人往里走，“来，上床”。在床上，我深吸一口气，迅速打开个人thinkpad，指着屏幕说：“我作的霓虹灯和窗外的比，是否是如出一辙...”