说起这个《刀剑SAO官网》，一开始我是没打算碰的。做东西喜欢挑那些简单、明快的色调，什么白底黑字，看着干净舒服。
硬着头皮，就是为了争一口气
那段时间，我不是在找前端的活儿吗？投简历投了几十份，好不容易捞到一个面试机会，进去后就被人家那个技术总监给损了一顿。他翻了翻我那几个demo，全都是那种“Hello World”级别的练习品，然后他直接来了一句：“你的作品，一看就是没经历过大项目的，连个暗色主题都做不出来，还想拿高薪？”
当时被他怼得我脸都红了，心里那股火“蹭”一下就冒起来了。妈的，我就是要做一个暗色系的主题出来，而且要做得复杂，要做出那种赛博朋克的未来感，让他看看老子到底行不行。我一琢磨，最能体现科技感和复杂界面的，不就是《刀剑神域》那种东西吗？
所以我就决定了，不搞别的了，直接复刻一个SAO的官网。而且不是随便搞搞，我要把那个界面上各种半透明的浮动窗口、复杂的导航动画全啃下来。
从零开始，代码堆成了山
我第一步干的事，就是把官方网站的截图，还有各种游戏UI的素材，全扒了下来。不是为了偷代码，只是为了对颜色、对像素，要做到神似。这个过程，我光是找那种未来风的背景纹理和SAO的字体，就耗了我一个晚上。
小编温馨提醒：本站只提供游戏介绍，下载游戏请前往89游戏主站，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
第二个晚上，我开始敲结构。那个复杂的导航栏，有好几层，还有半透明的背景，上面一层层地叠上去。我一开始想用老一套的浮动（float），结果刚试了十分钟就放弃了。那东西一复杂起来，简直是噩梦。我咬着牙，直接上了Flexbox和Grid布局，这俩东西我之前用得少，这回算是被逼上梁山。
- 死磕了主导航：它需要hover的时候能浮现出子菜单，而且子菜单的背景要有那种颗粒感和微弱的辉光。我调了快三个小时的阴影（box-shadow）和透明度（opacity），才搞定那个“幽灵”效果。
- 处理了浮动窗口：SAO界面上很多信息框都是悬浮在主内容上的。我用了定位（position: absolute），然后加上视差滚动的效果。用户滚网页的时候，这些窗口不是跟着一起滚，而是慢悠悠地跟在后面，营造出那种空间层次感。为了这个效果，我翻了无数的教程，那代码写得我头皮发麻。
- 优化了性能：因为我塞了太多动画和半透明的东西，页面刚开始跑的时候有点卡。我花了一天时间，把所有能用CSS动画解决的问题，全都替换掉了那些笨重的JS动画，减少了页面的重绘次数，这才跑顺畅。
的结果，把人给治愈了
我折腾了整整两个通宵，红牛喝光了四罐。等我把所有页面串起来，点开浏览器，看到那个漆黑、冷峻，又充满科技感的官网界面完整显示出来的时候，那种感觉简直是太爽了。
它比我之前那些“Hello World”好看多了，甚至比真的SAO官网还要炫酷一点（自己吹牛皮）。我把这个项目放进了我的作品集里，然后投了下一家公司。
这回面试，那个技术经理一看我的作品集，二话不说，直接点开了这个SAO官网。他看了三分钟，头都没抬一下，然后问了我一个问题：“这个项目，你用了Grid布局？”我说：“对，为了处理复杂的区块排列。”他点点头，然后说：“行了，我们公司很缺能写复杂暗色主题的人，你周一过来上班。”
一句话，搞定。之前那个嘲笑我的总监，现在想起来，他不过就是我完成这个项目的“启动器”罢了。实践出真知，以前老觉得那些复杂的效果是“专业人士”才能搞定，自己动手才知道，无非就是多花点时间，多掉点头发。