墮落糜爛的光芒-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，指着屏幕說：「我作的霓虹燈和窗外的比，是否是如出一轍...」

源碼地址不會閃的霓虹燈算什麼霓虹燈，下次的文章就是要作會閃的霓虹燈，還有東莞的往事，也會有續篇...預告

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。