轰炸网页的小飞机网址

第一次见到“轰炸网页的轰炸小飞机”这个说法，是网页网址在一个老外的技术论坛里。有人发帖问：为什么我打开某个页面，飞机会有一架小飞机从屏幕左边飞到右边，轰炸扔下炸弹，网页网址然后网站就“炸”了？飞机底下跟帖的人没一个正经回答，全在刷“awesome”。轰炸我当时也乐了，网页网址但乐完突然意识到——这玩意儿其实是飞机个挺妙的隐喻。

所谓“轰炸网页的轰炸小飞机”，说白了就是网页网址一段用CSS或Canvas写出来的动画。它不是飞机什么黑客工具，也不会真把你的轰炸浏览器炸掉。它干的网页网址唯一一件事，就是飞机在页面上画一架小飞机，让它沿着某条路径飞过去，飞的过程中丢下几个“炸弹”图标，最后页面上的某个元素“爆炸”消失。就这么简单。但你得承认，第一次看到的时候，确实会愣一下。

我最早是在CodePen上翻到的。一个叫“Bomber Plane”的demo，作者用纯CSS做了架俯视视角的飞机，螺旋桨还会转。鼠标点击页面任意位置，飞机就朝那个方向飞过去，飞到之后丢一颗炸弹，炸弹落地触发一个爆炸的SVG动画，然后被炸的那个DOM节点就没了。整个逻辑不到一百行代码。我盯着看了五分钟，然后默默把代码扒下来，贴到了自己的一个测试页面上。

效果怎么说呢。你把鼠标往页面上一戳，飞机嗡嗡嗡地飞过去，轰一下，那个按钮就没了。再戳一下，导航栏没了。再戳，整个header都没了。那种感觉很奇怪——你明明知道这只是DOM节点被删了，刷新一下就能回来，但视觉上带来的反馈太直接了，直接到你会产生一种“我真的在破坏什么东西”的错觉。这大概就是为什么那么多人喜欢在项目里塞这种彩蛋。

不过这东西也不是随便用都好看。我见过一个博客，在404页面上放了这架飞机，飞机飞过之后把“404”三个数字炸成碎片，碎片散落一地。这个用法就很聪明，因为404本身就是一个“东西没了”的场景，飞机轰炸的隐喻和页面主题完全对上了。反过来，我也见过有人在正经的电商结算页面上加这个，用户点“提交订单”，飞机飞过来把订单按钮炸了。这就很莫名其妙，用户只会觉得网站坏了。

所以关键不在于飞机本身，而在于它出现在哪里、炸掉的是什么。炸掉一个无关紧要的彩蛋元素，那是幽默。炸掉用户正要用的功能按钮，那是灾难。这个边界感，很多跟风加特效的人根本没想清楚。

还有一点挺有意思的。这架飞机最早流行起来的时候，正好是CSS动画和SVG开始大规模取代Flash的那几年。大家突然发现，原来不用插件也能在网页上做这种“游戏感”的东西。于是各种小飞机、小坦克、小火箭的动画满天飞。但大浪淘沙，最后留下来的还是那些把动画和页面语义结合得好的案例。纯粹为了炫技的，看两眼就腻了。

我自己后来也写过一个变体。把飞机换成了一个小人，手里拿着锤子，点一下页面，小人跑过去把那个元素锤飞。代码逻辑几乎一样，只是换了SVG素材。给几个朋友看过，反应都差不多：先笑，然后问“这有什么用”。说实话，没什么用。但网页上有些东西的存在，本来就不是为了“有用”。就像你小时候在课本边角画小人打架，老师看见了会骂你，但你自己知道，那几分钟的走神，比整节课都快乐。

那架小飞机也一样。它不解决任何问题，不提升任何转化率，不优化任何性能。它只是在你打开一个网页的时候，突然飞过来，扔下一颗炸弹，然后消失。你愣一下，笑一下，关掉页面。这事儿就算完了。