昨天我在家闲得蛋疼，老婆又在旁边碎碎念说我只会躺着刷手机，我就琢磨着得搞点新花样。最近脑子里一直转着那个“七宗罪”的梗，觉得用纯HTML撸一个出来应该挺有意思的，反正也没啥事干，就说干就干了，拿出来折腾一下。
本站为89游戏官网游戏攻略分站，89游戏每日更新热门游戏，下载请前往主站地址:www.gm89.me
起手式：先搭个架子
我直接开了个记事本（懒得启动VS Code那大家伙），文件名就叫“*”，省事儿。也没多想，先把七个罪名全部硬邦邦地敲上去：傲慢、嫉妒、暴怒、懒惰、贪婪、暴食、色欲。我就用最基本的标题和段落标签，把七块内容区域给隔开，每块都给它起个ID，方便后面做定位和样式。
起初我只想做个文字展示页，但转念一想，标题叫“游戏”，总得有点互动的意思？我可不想碰那些JavaScript的烂摊子，太麻烦。就想着，能不能用最简单的CSS把这个“绅士”的感觉给搞出来，还得能有点点击或者划过的效果。
内容往里塞：找图比写代码费劲
我寻思光有字面意思不行，得搞点让人挪不开眼的视觉效果。我就去网上瞎扒拉了一些跟这主题搭边的图和GIF。有些图那叫一个带感，但我还是选择了相对保守又有点意境的那种，毕竟只是个给自己看的实践记录。我把图片都压缩了一遍，全丢进一个叫“assets”的文件夹里。这一步花的时间，愣是比我写HTML结构代码还长，主要是选材太让人纠结了。
-
傲慢（Pride）：
配了个高视角的黑白图，再加了一句特别拽的、哲学意味的描述，用CSS搞了个斜体，显得很孤傲。 -
色欲（Lust）：这是大家最关心的，我也花了不少心思。我没敢直接放太刺激的，就弄了一个模糊处理的静态图做封面，然后写了个简单的CSS伪类，比如`:hover`，只有鼠标滑上去的时候，图片才会变得清晰一点。这叫做欲盖弥彰，效果瞬间拉满了。
-
懒惰（Sloth）：这个设计最简单粗暴。我直接弄了一个巨大的“加载中…”动画，一个圆圈一直在那儿转，永远也转不完，象征着懒惰的永恒拖延。这玩意儿纯CSS实现，没用任何图片。
的收尾：全靠CSS撑场面
为了让它有点“游戏”的幽暗神秘感，我把整个页面的主题色定成了深黑，配上一点点深酒红做点缀。让文字颜色保持暗淡，只有用户和它互动的时候，比如鼠标划过某个“罪”的名字，对应的图片和文字介绍才会稍微变亮或浮现出来。
这个“互动”的核心，我没用JS，完全是靠着CSS的`:checked`和`:target`伪类搞定的。我给每个罪名区域都绑了一个隐藏的复选框，点击罪名标题就切换复选框的状态，然后用这个状态来控制另一块隐藏的“详情”区域的显示和隐藏。这是最笨的方法，但也最稳定，纯靠HTML和CSS就搞出了一个点击展开/收缩的效果。
搞完一看，黑沉沉的底色，配上精心挑选的画面，那感觉一下就来了。虽然代码有点粗糙，但效果自己很满意。前前后后大概弄了三个小时，主要精力都花在找图、调色和用土办法实现交互上。总算把这个“七宗罪”的游戏给糊弄出来了，完美收工，自己挺满意这回的瞎折腾。
