突发奇想，要搞个官网
就是闲不住，看到什么新奇的视觉设计，就总想自己上手试试。前段时间，我看到一个搞得神神秘秘的二次元游戏预告片，那种暗黑催眠风，给我整得心痒痒。我寻思，与其等它官方出站，不如我自己先来搓一个官网玩玩。
本站为89游戏官网游戏攻略分站，89游戏每日更新热门游戏，下载请前往主站地址:www.gm89.me
当时脑子里就一个念头：这官网得有那味儿，得够迷幻，但又不能太复杂，我可不想花太多时间去搭框架。我就想着，用最土的办法，HTML、CSS，顶多加点简单的JS做点小动画，直接干。
起步：找素材定调子
我这人做东西，讲究先定调。这叫“催眠偶像”，那颜色必须是深色系，最好是黑金或者黑紫。我先是上网 扒拉了一堆参考图，主要是看人家怎么处理渐变和阴影，做出那种深邃又有点诱惑的感觉。说真的，找图比我写代码还费劲，因为要找那种既视感强，又不能有版权争议的“概念图”。
定了调子后，我 着手开始画草稿。结构很简单，就三大块：
- 主页区：一个巨大的背景图，上面有游戏标题和一句Slogan。得用CSS让背景图有点慢悠悠的视差滚动，显得高级。
- 角色区：放几个我随便瞎编的偶像，最好是那种立绘感强的卡片。
- 情报区：用来放公告和“预购”按钮，纯粹是摆设，但不能少。
细节的折磨：CSS的拉锯战
当我开始真正敲代码的时候，就发现难受了。我用的是最简单粗暴的纯CSS布局，不靠Bootstrap那些花里胡哨的东西。我这回的目标就是要让它在手机上也能看，这就意味着响应式设计必须安排上。但每次我把PC端调得漂漂亮亮的时候，一换到手机模拟器，整个页面就一团乱麻，图片要么溢出，要么挤成一坨。
为了解决这个，我耗了整整一个下午，不断地调整媒体查询（Media Queries）。我甚至为了让那几个“偶像卡片”在手机上能变成上下排列，又在flexbox和grid之间来回切换，才勉强找到一个都能对付过去的布局。这玩意儿，真就是体力活，得靠时间一点点磨出来。
实现“催眠感”的障眼法
光黑金配色还不够，得有点催眠的动态效果。我可不想用那些复杂的JS库，我就想用最基础的CSS动画搞定。
我设计了两个小把戏：
- 文本的微弱呼吸：让主页的标题文字有一个极其缓慢、几乎察觉不到的颜色深浅变化。看起来就像在微弱地呼吸一样。我 设置了一个超长的动画周期，比如十秒钟变一次，这样才够迷幻。
- 背景的漩涡：我 找了一张带有螺旋纹理的图片，然后用CSS的
transform: rotate()属性，让它以一个每分钟只有几度的超慢速度旋转。这样看起来，整个背景就好像在轻轻地吸人进去。
这两个效果一加上去，页面的气质瞬间就立起来了。同事看到了，还问我是不是用了什么高级引擎，我笑笑说：“都是老掉牙的把戏，靠的就是慢。”
收尾与交付：把假的东西做成真的
就是把官网的各个功能位填充完。虽然游戏是假的，但我必须得做出预购按钮和新闻列表的样子。我随便写了三条公告，假装游戏正在开发中，然后那预购按钮，我 给它链接到了一个简单的留言表单页，假装收集玩家信息。
整个官网的视觉风格算是彻底定型了，所有图片都做了锐化和暗角处理，整体看起来阴沉又带感。接下来就是上线。我 直接打包，扔到我那个便宜得不能再便宜的虚拟主机上。虽然这只是个实践记录，但看着它真真实实地跑在网络上，心里还是挺有成就感的。
这回实践下来，我发现，很多时候，越是想做出“高级”效果，越要回归基础，从最简单的HTML和CSS抠细节，才能把那股子味道给拿捏住。光靠框架和库，是出不来这种独特的怪味的。
