从零开始，搭一个末日官网的实战记录
最近手头有点紧，想着得赶紧弄个拿得出手的项目塞进简历里，不然面试官问起来都没东西聊。琢磨了几天，看最近僵尸题材的电影又火了，干脆就自己虚拟了一个游戏叫《病毒危机Z》，然后把它的官网给它搭出来。这个官网，我要求不高，就得是那种，一眼看上去就能闻到腐臭味和铁锈味儿的。
第一步：工具箱和配色，先搞定气氛
搞这种带感的东西，不能用太现代的框架，那种干净利落的界面配不上末日。我就是土法炼钢，直接撸原生HTML和CSS。JS也只用了最基础的DOM操作，搞点简单的动效。
配色是重中之重。末日风，我直接拍板，主色调必须是：
- 主背景：深黑或者那种带着灰土感的深灰。
- 强调色：血红和腐烂的荧光绿。这俩色一搭，那味儿就正了。
- 字体：找了一圈，选了一个有点像素化，边缘粗糙的衬线字体，看着就像是广播里的紧急通知，带着雪花点。
为了省钱，图片素材我是在几个免费图库里扒拉的。主要是找那种废弃城市、破碎玻璃和生锈金属的贴图，然后自己用CSS的mix-blend-mode和filter给它们叠加了一层红光，让背景显得又脏又压抑。
第二步：搭骨架，打造“病毒”首页的冲击力
官网的首页，必须要有视觉冲击。我直接把整个屏幕分成了三部分。
- 顶部导航栏：我可没用什么干净的线条。导航栏我用了一个非常暗的背景，然后把链接文字做成了闪烁和轻微的“故障风”效果。鼠标移上去，文字会稍微抖动一下，模拟信号不稳定的感觉。
- 中央主体：这里是重头戏。我把游戏标题“病毒危机Z”的Logo放得巨大，用CSS做了一个非常微妙的呼吸效果。看起来就像是一个被感染的标志，在暗处一吸一呼。下面直接放了一个巨大的“立即预购”按钮。按钮的颜色就是那股子荧光绿，但周围加上了暗红色的阴影，显得特突兀。
- 背景细节：我在整个页面最底层放了一个视频背景，是那种慢动作的浓烟和火星。为了不抢镜，我把这个视频的透明度调到只有百分之十五，但是光影闪动的时候，整个页面的氛围感就出来了。
最耗时间的地方是那个倒计时模块。我决定做一个距离游戏发售的倒计时。我没有直接用系统时间，而是写了个JS脚本，让倒计时数字不是平滑过渡的，而是每秒切换的时候，数字周围都会随机闪烁几个白色像素点。这小细节搞了我快两个小时，但效果出来，我直接拍大腿叫
第三步：填充内页——媒体与世界观的打造
光有首页不行，还得有内容撑着。官网的核心就是“媒体库”和“故事背景”。
我在“故事背景”页面，用了一种很像是手写涂鸦的样式来展示世界观。文本块的边框我设置得歪七扭八的，好像是用胶带随便贴上去的。文字内容我随便编了一段，主要是讲一个叫“Z-17”的病毒是如何爆发的，用词尽量粗糙，像极了幸存者的日记。
“媒体库”页面，我遇到了点小麻烦。我需要放很多截图和视频预告。我可没钱买专业服务，只能土炮解决。
我抠了十来张网上的废土图片，然后用PS把它们处理成了高对比度、低饱和度的样子，然后用一个简单的栅格布局把它们塞进去。重点是，这些图片在展示的时候，我给它们加了一个边框，这个边框是断断续续的，上面还带着像是被烧焦的纹理。
至于视频，我假装嵌入了三个预告片占位。视频播放的按钮我特意设计成了一个圆形，中间是一个血红的“播放”图标，周围一圈红色的颗粒物在抖动，意思是“危险，点击播放”。虽然点进去只是一个静态占位图，但在视觉上，它已经完成了任务。
第四步：收尾测试，把成品推出去
所有内容都塞完后，我开始全面测试。我找了几台分辨率不一样，系统版本也不同的机器跑了一遍。
我发现了一个大坑：在某些旧浏览器上，我用的那个文字故障特效会直接导致文字显示不出来。没办法，我赶紧写了个回退方案，如果检测到是老古董浏览器，就让它显示普通字体。虽然差点意思，但总比页面崩了强。
我做了一个小决定，给整个网站加上了一个低频的环境音。就是那种遥远的、若隐若现的电流声和心跳声。默认静音，但在页面底部有个小开关。这一下，整个官网的沉浸感就拉满了。
搞定！我打包压缩，直接上传到我那个便宜的虚拟主机上。看着“病毒危机Z”的官网成功上线，虽然只是个假项目，但这套实战流程跑下来，感觉又学到不少东西。下一步，我得琢磨琢磨，怎么让这个网站在手机上看也一样有压迫感。今天这活儿算是彻底交差了！