我搞了个网页，长得跟Win7一模一样
上周翻GitHub想给个人主页换个皮肤，结果撞见一个叫7.css的东西，点进去差点以为自己穿越了——整个页面就是Windows 7经典界面，连那个“我的个程序”对话框都原样复刻。这玩意儿是个纯CSS框架，专门用来做Win7 UI的忠实还原，而且不依赖任何JavaScript，你爱用React、Vue还是原生HTML都随便套。
【按钮按下去，蓝光会亮】 最让我上头的就是它把Win7那些交互细节全搬过来了。普通按钮默认75px宽、23px高，灰色渐变背景，点下去瞬间变成天蓝色渐变，跟当年一模一样。默认按钮（就是对话框里按回车触发那个）带一圈绿蓝色边框，背景是浅蓝渐变，连焦点状态的虚线边框都还原了。复选框、单选框、下拉框、进度条、滚动条、滑块、选项卡……你能想到的Windows原生控件它基本都有。而且它支持Tree-shaking，你只用按钮的话就只引入buttons.css，不用扛一整包。
【连毛玻璃和气球提示都没放过】 最惊喜的是它连Win7的Aero毛玻璃效果都做了——有个专门的Glass frame样式，窗口标题栏半透明带模糊，配上经典的窗口边框阴影，视觉上几乎以假乱真。还有那个气球提示（Balloon），就是任务栏右下角弹出来的小气泡，它用role="tooltip"实现，还能通过is-top/is-bottom这些类控制气泡尾巴朝向。如果你担心跟别的CSS框架打架，它提供了作用域版本（scoped.css），套一个.win7类就能隔离样式。
【安装就一行代码，别端着】 用起来真的不费劲：从unpkg引入或者npm装一下，然后写语义化HTML就行。比如按钮就用<button>，复选框要配<label>的for属性，选项卡靠role="tab"来标记。项目基于XP.css和98.css一路迭代过来，社区一直在维护，GitHub上Issues和贡献指南都开着。我拿它搭了个复古风格的工具页面，发到群里好几个人问“你电脑是不是没升级”。你要是也手痒，直接搜7.css就能找到仓库，搞个个人博客或者小工具界面，绝对能让懂的人会心一笑。你最近有在折腾什么好玩的前端项目吗？
评论
暂无评论