名場面再現-（僞）恐怖片裏的玫瑰酒店

請你們通知你們：本篇文章大量使用了前面兩篇文章的技術點，若有不懂，請先看這裏，還有這裏。

在1995年，上映了一部搞笑片，叫《新烏龍院2無敵反斗星》，主演是郝邵文和釋小龍兩個小朋友（如今一點都不小了）。這部片子我只記得很搞笑，但情節卻記不得啦。裏面惟一讓我印象深入的就是下面這個場景，能夠說是搞笑片裏面對恐怖片致敬（顛覆？）的名場面。

最近這段時間，我沉迷於霓虹燈特效沒法自拔，決定再現名場面，把這個鬼店用svg+css作出來。

一、學習使用SVG做圖工具-Inkcape

因爲這裏面涉及到拆字，須要把瑰拆成王和鬼，因此直接使用svg的text是不行的，那麼要把text轉化成path，就必須上專業工具了，因而我就在這篇文章裏面列的5款憑運氣選了一款（是的，我就是這麼隨性），把瑰字拆開。

用文字對象工具把字寫好

把文字轉換成對象，方便後面拆字

經過節點編輯路徑工具選擇「王」的節點，而且拉開距離

選中「王」的全部節點，按「del"，獲得的就是「鬼」，同理，刪除「鬼」，獲得的就是「王」

拆分開後再排號位置，保存爲svg文件，就完成了拆字的工做。

二、打開霓虹燈

霓虹燈靜態字的特效有好多辦法，若是是text，可使用css的text-shadow屬性，但如今文字已經拆成了svg的path，因此咱們就只能用svg的filter啦，代碼以下：

<svg width="600" height="350">
        <defs>
            <filter id="filter-blur-svg">
                <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
            </filter>
            <filter id="filter-blur-svg-wang">
                    <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
                </filter>
            <g aria-label="玫瑰酒店"
                style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:47.14522171px;line-height:1.25;font-family:YouYuan;-inkscape-font-specification:'YouYuan, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill: #f20000;fill-opacity:1;stroke:none;stroke-width:1.51825976"
                id="text842" inkscape:label="text842">
                <path
                    d="m 38.557189,128.80234 -0.736644,4.05154 h 18.784424 q 1.841611,1.10497 0,2.20993 h -3.314898 q 0,15.10121 -7.734763,25.78255 5.524831,5.1565 12.52295,8.4714 1.104966,1.84161 -0.736644,2.20993 -6.629797,-2.94657 -13.627916,-8.83972 -6.629797,5.52483 -15.469526,8.83972 -2.209932,-0.36832 -0.736644,-2.20993 8.471407,-2.94657 14.732882,-8.4714 -4.419865,-5.52484 -7.734763,-16.5745 -1.104966,3.3149 -4.051543,8.47141 -1.84161,0.73664 -1.84161,-1.10497 6.261475,-11.04966 7.734763,-22.83596 1.104966,-1.84161 2.209932,0 z m -21.362678,0.36832 H 29.71746 q 1.84161,1.10497 0,2.20993 h -5.156508 v 13.2596 h 4.419864 q 2.209932,1.10496 0,2.20993 h -4.419864 v 13.99624 q 3.314898,-1.84161 5.156508,-2.94658 2.209932,0 1.104966,1.84161 -5.893152,3.3149 -13.627915,7.36644 -2.209933,-0.36832 -0.736644,-2.20993 2.578254,-1.10497 5.893152,-2.94658 v -15.1012 h -5.156508 q -2.209933,-1.10497 0,-2.20993 h 5.156508 v -13.2596 h -5.156508 q -1.841611,-1.10496 0,-2.20993 z m 33.885628,5.89315 H 37.452223 q -0.736644,2.57826 -1.473288,5.89316 2.578254,11.04966 7.734763,18.04778 6.998119,-9.20806 7.366441,-23.94094 z"
                    style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:47.14522171px;font-family:YouYuan;-inkscape-font-specification:'YouYuan, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:1.51825976;fill:#f20000"
                    id="mei" inkscape:connector-curvature="0" />
                <path inkscape:label="path846" id="gui"
                    style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:47.14522171px;font-family:YouYuan;-inkscape-font-specification:'YouYuan, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;display:inline;stroke-width:1.51825976;fill:#f20000;"
                    d="m 90.124894,126.98374 c 1.227746,-0.98219 1.964386,-0.73664 2.209936,0.73665 -0.4911,0.73664 -1.227745,1.84161 -2.209936,3.3149 h 9.944696 c 2.94657,0 4.29709,1.22774 4.05154,3.68322 v 12.89127 c 0.24555,2.94657 -1.10497,4.29709 -4.05154,4.05154 h -6.99812 v 9.9447 c 1.47329,-2.94658 2.57825,-5.77038 3.3149,-8.47141 0.98219,-0.98219 1.71884,-0.85942 2.20993,0.36832 -0.73665,2.94658 -1.71884,5.52483 -2.94657,7.73476 l 5.89314,-1.10496 -1.47328,-4.05154 c 0.24555,-1.22775 0.98219,-1.4733 2.20993,-0.73665 0.98219,2.45548 1.71884,4.78819 2.20993,6.99812 0,1.22774 -0.61387,1.59606 -1.84161,1.10497 l -0.36832,-1.10497 -6.99812,1.10497 c -1.22774,0.24555 -1.96438,-0.12278 -2.20993,-1.10497 v 3.3149 c 0,1.47329 0.73664,2.08716 2.20993,1.84161 h 7.36644 c 1.71884,0.24555 2.45548,-1.22774 2.20993,-4.41987 0.73665,-0.98219 1.47329,-0.98219 2.20994,0 0.24555,4.66541 -0.98219,6.87535 -3.68322,6.6298 h -8.47141 c -2.70103,0.24555 -4.051541,-0.98219 -4.051541,-3.68322 v -14.36456 c -2.701029,9.82192 -8.471408,16.20617 -17.311137,19.15275 -1.22774,-0.24555 -1.473288,-0.9822 -0.736644,-2.20994 8.103085,-2.94658 13.382368,-8.59418 15.837848,-16.94281 h -6.629797 c -2.45548,0.24555 -3.68322,-0.98219 -3.68322,-3.68322 v -12.89127 c 0,-2.70103 1.350514,-4.05154 4.051542,-4.05154 h 5.156509 c 0.982192,-1.47329 1.84161,-2.82381 2.578254,-4.05155 z m -0.368322,6.26148 h -6.998118 c -1.473289,0 -2.209933,0.73664 -2.209933,2.20993 v 4.78819 h 9.208051 z m 9.944698,0 h -7.73476 v 6.99812 h 9.94469 v -5.15651 c 0.24555,-1.22774 -0.4911,-1.84161 -2.20993,-1.84161 z m -9.944698,9.20805 h -9.208051 v 5.15651 c 0,1.47329 0.736644,2.08716 2.209933,1.84161 h 6.261474 z m 12.154628,0 h -9.94469 l -0.73665,6.99812 h 8.47141 c 1.71883,0.24555 2.45548,-0.36832 2.20993,-1.84161 z"
                    inkscape:connector-curvature="0"
                    sodipodi:nodetypes="cccsccccccccccccccccsccccccscccccssscccsscccsccccsccsccccccccc" />
                <path
                    d="m 112.58992,130.27563 q -0.73664,-2.20994 1.47329,-1.84161 3.68322,2.94657 6.6298,6.26147 0.73664,2.20993 -1.47329,1.47329 -3.3149,-3.3149 -6.6298,-5.89315 z m 8.83973,-1.10497 h 29.46576 q 1.10497,1.10497 0,2.20993 h -8.83973 v 5.89315 h 5.52483 q 4.41987,0 4.05155,3.68323 v 26.51918 q 0.36832,4.05154 -4.41987,3.68322 h -21.36268 q -3.68322,0.36832 -3.68322,-3.68322 v -26.15086 q 0.36833,-4.05155 3.68322,-4.05155 h 5.15651 v -5.89315 h -9.57637 q -1.47329,-1.10496 0,-2.20993 z m 18.4161,2.20993 h -6.6298 v 5.89315 h 6.6298 z m -8.83973,8.10309 h -4.41986 q -2.20993,0 -2.20993,2.20993 v 18.4161 h 25.04589 v -5.52483 h -5.1565 q -4.41987,0.36832 -4.41987,-4.41986 v -10.68134 h -6.6298 q 0.36833,10.68134 -5.52483,16.20617 -2.20993,0 -1.10496,-1.84161 5.15651,-5.52483 4.41986,-14.36456 z m 16.20617,0 h -5.15651 v 11.04966 q 0,2.20993 2.20994,1.84161 h 5.1565 v -10.68134 q 0.36833,-2.20993 -2.20993,-2.20993 z m -35.72724,2.20993 q 4.05155,3.3149 6.99812,6.26147 0.73665,2.20994 -1.47329,1.47329 -3.31489,-2.94657 -6.99811,-5.89315 -0.73665,-2.20993 1.47328,-1.84161 z m 5.89316,12.52295 q 1.84161,-1.84161 2.20993,0.36832 -2.57826,6.99812 -7.73476,14.36456 -2.20994,1.10497 -1.84161,-1.10497 5.1565,-7.73476 7.36644,-13.62791 z m 32.04401,8.10308 h -25.04589 v 4.41987 q 0,2.57825 2.20993,2.20993 h 20.62603 q 2.57826,0.36832 2.20993,-2.20993 z"
                    style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:47.14522171px;font-family:YouYuan;-inkscape-font-specification:'YouYuan, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:1.51825976;;fill:#f20000"
                    id="jiu" inkscape:connector-curvature="0" />
                <path
                    d="m 178.88789,128.06569 q 1.10497,1.84161 1.84161,4.05155 h 16.20617 q 1.84161,1.10496 0,2.20993 h -32.41234 q -2.20993,0 -2.20993,2.20993 v 12.52295 q 0.36832,14.36456 -4.05154,22.46764 -2.20993,0.73665 -1.84161,-1.47328 4.05154,-7.73477 3.68322,-20.99436 v -13.25959 q 0,-3.68322 3.68322,-3.68322 h 14.73288 q -0.73664,-1.84161 -1.47329,-3.3149 0,-1.47329 1.84161,-0.73665 z m 1.84161,7.73477 v 5.89315 h 18.04778 q 1.84161,1.10497 0,2.20993 H 180.7295 v 7.36644 h 10.31302 q 4.78819,0 4.41986,3.68322 v 11.78631 q 0.36833,4.05154 -3.68322,3.68322 h -21.36267 q -3.68323,0.36832 -3.68323,-3.68322 V 154.9532 q 0,-3.68322 3.68323,-3.68322 h 8.10308 v -15.46952 q 1.10497,-1.47329 2.20993,0 z m 9.57638,17.67945 h -19.15275 q -2.20993,0 -2.20993,2.20994 v 10.31301 q 0,2.57826 2.20993,2.20994 h 19.88939 q 2.57825,0.36832 2.20993,-2.20994 v -10.31301 q 0.36832,-2.20994 -2.94657,-2.20994 z"
                    style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:47.14522171px;font-family:YouYuan;-inkscape-font-specification:'YouYuan, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:1.51825976;fill:#f20000;"
                    id="dian" inkscape:connector-curvature="0" />
                <path
                    style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:47.14522171px;line-height:1.25;font-family:YouYuan;-inkscape-font-specification:'YouYuan, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;display:inline;fill-opacity:1;stroke-width:1.51825976;fill:#f20000"
                    d="m 61.367472,130.11478 h 13.2596 c 1.22774,0.73665 1.22774,1.47329 0,2.20993 h -5.89316 v 12.52295 h 4.41987 c 1.22774,0.73665 1.22774,1.4733 0,2.20994 h -4.41987 v 14.36456 c 2.70104,-0.98219 4.91097,-1.84161 6.62981,-2.57826 1.22774,0.24555 1.47328,0.98219 0.73664,2.20993 -4.66541,1.96439 -9.57638,3.68323 -14.73289,5.15652 -1.22774,-0.4911 -1.35052,-1.22774 -0.36832,-2.20994 2.20993,-0.73665 4.05154,-1.35052 5.52483,-1.84161 v -15.1012 h -4.78819 c -1.22774,-0.73664 -1.22774,-1.47329 0,-2.20994 h 4.78819 v -12.52295 h -5.15651 c -1.22774,-0.73664 -1.22774,-1.47328 0,-2.20993 z"
                    id="wang" inkscape:connector-curvature="0" />
            </g>
        </defs>
        <use xlink:href="#mei" id="meifront" />
        <use xlink:href="#mei" id="meiback" filter="url(#filter-blur-svg)" />
        <use xlink:href="#jiu" id="jiufront" />
        <use xlink:href="#jiu" id="jiuback" filter="url(#filter-blur-svg)" />
        <use xlink:href="#wang" id="wangfront"  />
        <use xlink:href="#wang" id="wangback" filter="url(#filter-blur-svg-wang)" /> 
        <use xlink:href="#gui" id="guifront" />
        <use xlink:href="#gui" id="guiback" filter="url(#filter-blur-svg)"/>
        <use xlink:href="#dian" id="dianfront" />
        <use xlink:href="#dian" id="dianback" filter="url(#filter-blur-svg)"/>
    </svg>複製代碼

看，path已經變成了5個，「瑰」字已經拆分紅了兩個path，使用feGaussianBlur作出了簡單的發光效果，由於今天的重點不在這裏，因此我就不細講了，效果以下：

三、動畫開始

首先咱們須要讓「玫」，「酒」這兩個字閃爍而後暗掉。動畫代碼以下：

.svg-text {
            animation: flicker 6s;
            animation-iteration-count:1;
            animation-fill-mode:forwards;
}
@keyframes flicker {
            0% {
                opacity: 1;
            }
            5% {
                opacity: 0.4;
            }
            10% {
                opacity: 1;
            }
            13% {
                opacity: 0.4;
            }

            26% {
                opacity: 1;
            }

            37% {
                opacity: 0.4;
            }

            58% {
                opacity: 1;
            }

            69% {
                opacity: 0.4;
            }

            77% {
                opacity: 1;
            }

            89% {
                opacity: 1;
            }

            90% {
                opacity: 0.4;
            }

            100% {
                opacity: 0.1;
            }
        }
......
<use xlink:href="#mei" id="meifront" class="svg-text" />
<use xlink:href="#mei" id="meiback" filter="url(#filter-blur-svg)" class="svg-text"/>
<use xlink:href="#jiu" id="jiufront" class="svg-text" />
<use xlink:href="#jiu" id="jiuback" filter="url(#filter-blur-svg)" class="svg-text"/>複製代碼

這裏面須要注意的知識點（敲黑板）是：

• animation-iteration-count：動畫播放次數，以前的動畫都是循環動畫，用的是infinite，但此次，只播一次，因此用了1；
• animation-fill-mode：forwards，當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式，正常狀況下動畫播完的話，對象回到動畫前的狀態，而使用forwards，動畫的最後狀態就是對象的最終狀態，不會回到初始狀態。

這樣最終看到的「玫」，「酒」字的動畫是這樣的：

而後「王」字我決定要單獨處理一下，體現個人藝術功底（調參數上癮，沒法自拔）。

.svg-text-wang {
            animation: grow 2s;
            animation-delay:6s;
            animation-iteration-count:1;
            animation-fill-mode:forwards;
        }
 @keyframes grow {
            0% {
                opacity: 1;
            }
            10% {
                opacity: 0.4; 
            }
            20% {
                opacity: 1; 
            }
            30% {
                opacity: 0.4; 
            }
            50% {
                stroke: aliceblue;
                fill:blanchedalmond;
            }
            100% {
                opacity: 0.1;
                fill: #f20000;

            }
        }
......
        <use xlink:href="#wang" id="wangfront"  class="svg-text-wang"/>
        <use xlink:href="#wang" id="wangback" filter="url(#filter-blur-svg-wang)" class="svg-text-wang"/> 複製代碼

這裏惟一的知識點是animation-delay，就是動畫延遲開始的時間，我是打算「玫、酒」滅掉後「王」字再登場，因此要延遲6秒，等前一段動畫完成，而後纔開始「王」的表演。效果以下：

處處，一個鬼店效果就完成了，此次其實沒啥新的東西，技術用的還不如上一篇文章來的多，但這是藝術，我是這麼認爲的。若是你有不一樣意見，那麼歡迎入住「玫瑰酒店」。

題外話：說到對恐怖片的解構，喜劇片裏面我以爲作的最好的就是星爺的《回魂夜》了，開始那一段嚇的我夠嗆，要不下次在夜深人靜的時候，咱們再聊一聊電影（donguan）。

源代碼

在線看效果