最近琢磨着给自己的作品集添点新东西，想着做个看起来够劲儿、够野蛮的网站。琢磨来琢磨去，就拍板了《反乌托邦的掠夺者》这个主题。说白了，就是搞一个那种废土风格的、虚拟游戏的官方页面，把实践过程从头到尾走一遍，记录下来给大家看看我是怎么折腾出来的。
确定方向：这个破烂网站得够味儿
我要它看起来不像正经网站。正经网站都太干净了，没意思。我想要的，是那种屏幕上有雪花、背景图像是油画一样粗糙、字体像是老式终端机蹦出来的感觉。确定了这种“破败美学”后，我才开始动手找工具。
我这人做东西，讲究一个“快”和“糙”，从来不爱搞那些大而全的框架。工具就选了最基础的那一套，保证上手就能跑：
- 原生HTML：结构怎么简单怎么来，标签嵌套我都懒得管太多。
- 纯CSS：没用预处理器，样式文件就一个，全部堆在里面。
- 一点点JavaScript：主要是控制首页那些闪烁的文本和雪花效果，让它看起来更像老旧显示器。
工具定下来后，我就开始动笔写结构。先把大框架搭起来，头部是生锈的Logo，导航栏要设计成那种故障菜单的感觉，点进去会稍微卡顿一下，模拟信号不好的样子。身体部分就是展示“游戏”的背景故事、角色介绍，以及一个假模假样的“加入我们”表单。底部塞了个版权信息，故意写得很模糊，让它更像废土世界里没人管的东西。
实践过程：把废土感硬塞进去
设计阶段是最磨人的，因为要实现“破烂”比实现“精致”更难。我用了大量的滤镜和纹理去搞定视觉效果。
我从网上扒拉了一堆高对比度的、生锈的金属图片，然后用PS把它们处理成背景纹理。在CSS里，我给主要的版块都套上了颗粒感的叠加层，并且通过 `opacity` 属性把文字和背景的对比度故意压低，制造一种很难阅读、但又很酷的感觉。字体方面，我特意挑了几个棱角分明的等宽字体，让它们在屏幕上显得特别扎眼。
最花时间的是首页的动画效果。我要让它看起来像CRT显示器在不断扫描、轻微抖动：
- 我写了一个小的Keyframe动画，让整个页面的 `translateY` 值在1px范围内随机跳动，频率调得很快，做到了持续抖动的效果。
- 然后我用CSS伪元素在页面上盖了一层透明度极低的斜线纹理，模拟扫描线。
- 用JS写了个定时器，让主标题的文字随机出现乱码字符，过一会儿再恢复正常，模拟信号被干扰。
这个过程就是不断地调试颜色和动画，直到眼睛看着有点难受，但又觉得特别带感为止。写代码很快，大部分时间都花在了“调味”上，反复试错，看看哪个颜色搭上哪个滤镜更有废土的味道。
收尾与反思：为什么要做这种“没用”的东西
等静态页面和基本动画都跑起来了，我把文件一打包，直接丢到了我的测试服务器上。不出意外地，第一次部署就爆了。服务器对路径的识别跟我本地不一样，所有的图片都裂了。我只能重新进去硬调了一遍相对路径，再重新上传，直到所有裂开的图标都恢复正常。测试了一下在手机上的显示，虽然自适应做得一团糟，但考虑到这个网站的风格就是“不修边幅”，我也就没再深入优化了，保持这种粗糙感反而更符合主题。
有人可能会问，你花那么多时间折腾一个完全虚构的网站，图什么？
这背后有一段小故事，也是我动手的直接原因。
前阵子我接了个项目，说好一周内给钱，结果对方拖了整整一个月，电话不接，微信不回。我那段时间气得够呛，工作进度也全被打乱了。我老婆看我每天在家郁闷，就让我出去散散心。结果刚出门，赶上我们这边百年不遇的大暴雨，全城停电，我只能又被关在家里。
那三天，屋里闷得像罐头，我连电脑都开不了，只能翻出以前存着的老科幻小说看。一看就是那些赛博朋克、废土文学。当时我就悟了，这不就是现实中的反乌托邦吗？想干活干不了，想收钱收不到，还被困在家里动弹不得。那种被“系统”卡住的感觉，让我憋着一口气。
电一恢复，我立马打开电脑，把那种愤怒和无力感全部倾泻到了这个网站的设计里。我不是在做一个作品集，我是在发泄，把所有的“故障”、“破损”和“掠夺”的概念，全都塞进了这个网站里。等我把网站做完，感觉那口气也顺了。正那个拖欠款的客户也终于打钱了。巧合也心理安慰也罢，这个“反乌托邦的掠夺者官网”，就是我在最憋屈那段时间的实践记录和情绪出口。
我才说，做技术，有时候不光是为了解决问题，也是为了解决自己的心病。