阅读 173

名场面再现-(伪)恐怖片里的玫瑰酒店

请大家通知大家:本篇文章大量使用了前面两篇文章的技术点,如有不懂,请先看这里,还有这里

在1995年,上映了一部搞笑片,叫《新乌龙院2无敌反斗星》,主演是郝邵文和释小龙两个小朋友(现在一点都不小了)。这部片子我只记得很搞笑,但情节却记不得啦。里面唯一让我印象深刻的就是下面这个场景,可以说是搞笑片里面对恐怖片致敬(颠覆?)的名场面。

最近这段时间,我沉迷于霓虹灯特效无法自拔,决定再现名场面,把这个鬼店用svg+css做出来。

1、学习使用SVG作图工具-Inkcape

由于这里面涉及到拆字,需要把瑰拆成王和鬼,所以直接使用svg的text是不行的,那么要把text转化成path,就必须上专业工具了,于是我就在这篇文章里面列的5款凭运气选了一款(是的,我就是这么随性),把瑰字拆开。

用文字对象工具把字写好
把文字转换成对象,方便后面拆字
通过节点编辑路径工具选择“王”的节点,并且拉开距离
选中“王”的所有节点,按“del",得到的就是“鬼”,同理,删除“鬼”,得到的就是“王”

拆分开后再排号位置,保存为svg文件,就完成了拆字的工作。

2、打开霓虹灯

霓虹灯静态字的特效有好多办法,如果是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做出了简单的发光效果,因为今天的重点不在这里,所以我就不细讲了,效果如下:

3、动画开始

首先我们需要让“玫”,“酒”这两个字闪烁然后暗掉。动画代码如下:

.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)。

源代码

在线看效果


关注下面的标签,发现更多相似文章
评论