我动手扒了《悲劇物語官方网站》
说真的，那天我闲得蛋疼，在找一些设计灵感，晃悠晃悠就点进了《悲劇物語》的官网。那网站，怎么说，一眼看过去就是那种极简又极度风格化的东西，特别对我的胃口。我当时就琢磨，这设计要是我自己来搞，能不能给它山寨一个出来，不是说要拿去用，纯粹就是手痒，想试试自己能不能实现那种感觉。
我第一件事，就是上去把它的代码给扒了一遍，看看那些花里胡哨的特效到底是怎么堆出来的。一看吓一跳，好家伙，里面一堆CSS代码叠得跟千层饼似的，各种定位和动画效果，很多地方写得特别“任性”，完全不是教科书教的那种规范写法。我心想这估计就是那种设计感爆棚的程序员或者设计师才做得出来的东西，为了视觉效果根本不顾维护性了，不过我喜欢。
实践记录：从零开始的硬核复刻
我二话不说，直接开了个新文件夹，把基础骨架先搭起来。
小编温馨提醒：本站只提供游戏介绍，下载游戏请前往89游戏主站，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
- 搭骨架： 我先把HTML写了一套，就按照官网那个结构，左边是黑底白字的大块文章，右边是一堆菜单和跳转，中间还要留一大块空，制造那种冷清的氛围。
- 排版搏斗： 接下来是重头戏，CSS。我发现最难搞定的就是它的文字排版。它不是那种规规矩矩的居中对齐，而是各种斜角、错位、还有超大的留白。我硬是用绝对定位和Flexbox在那边搓来搓去，试了好几十次，才把那些文字和板块勉强放到了视觉上差不多的位置，简直是跟像素点在打架。
- 加特效： 官网最骚的就是鼠标滑上去，文字会突然变色或者出现那种一闪而过的阴影。这个我靠着transition和hover伪类写了一大堆，让它在切换的时候显得“卡顿”又“流畅”，要的就是那股子说不上来的诡异风格。我记得光是为了模拟那个文字变色的速度，我就调了快一个小时，生怕它太快了显得俗气。
- 收尾部署： 搞完这些，一个看起来有模有样的“悲劇物語”官网粉丝复刻版就出来了。我把它打了个包，放到了一个只有我自己能看到的地方，随时都能拿出来秀一秀，或者以后拿来当作我做前端的一个小炫技作品。
整个过程下来，我最大的感受就是，做这种风格化的网站，技术反而是次要的，关键是眼睛得毒，得能看出那种设计上的精髓，然后用最土或者最笨的办法，硬着头皮把它实现出来。
我为啥对这种网站这么感兴趣？
我为啥能有这闲工夫去扒一个动漫官网？说出来你们可能不信，这都是拜我那前老板所赐。
我以前在一家公司做UI/UX，我们接的项目全是那种恨不得把所有功能都塞进一个页面的老土APP，老板的口头禅就是“这里再加个按钮”，“这个活动弹窗要用最亮眼的红色，怕用户看不到”。我天天的工作，就是把好不容易有点设计感的界面，硬生生改成花花绿绿的牛皮癣广告。我提议说，能不能让我们的界面简化一点，学学现在流行的极简风，用户体验会更结果你猜怎么着？老板说我“不接地气”，说我“没有站在用户的角度考虑，用户就是喜欢热闹”。
那段时间我每天都感觉要窒息了，对着那些辣眼睛的界面我真的编不下去。后来实在顶不住，我直接提了离职，裸辞回家。我走那天，老板还找人劝我说：“再坚持一下，年终奖很丰厚。”我当时就拉黑了所有工位的联系方式，连年终奖那点钱我都没要，我宁愿自己在家啃馒头，也不想再对着那种垃圾设计耗费我的生命。
从那之后我就明白了，上班是为了活着，做这种小项目才是为了证明自己还活着，证明自己眼睛还没瞎。我现在不接任何会让我眼睛受罪的单子。这个《悲劇物語》的网站，对我来说，就是一种自我救赎，是对过去工作的反抗，告诉自己：我能做出有品位的东西，只是以前没机会。