在前端开发的世界里，HTML、CSS和Java一直被视为不可或缺的三剑客。HTML构建页面结构，CSS负责视觉效果，而Java则为网页提供交互性。然而，最近一位名叫Benjamin Aster的开发者却打破了这一传统，他用纯HTML和CSS创造了一个《我的世界》（Minecraft）的克隆版，整个项目竟然没有一行Java代码！
这个项目的成功引起了广泛关注，甚至让Benjamin的服务器在短时间内被网友们挤爆。想要体验这款用480行CSS和46022行HTML构建的3D游戏的朋友，可以访问他的个人网站：https://benjaminaster.com/css-minecraft/。
Benjamin Aster的这一作品并非一时兴起，而是他三年前的实验项目，初衷是探索CSS的极限表现力，并测试当时新出现的:has()选择器。没想到，这个项目在分享后突然走红网络，吸引了大量用户体验和讨论。
项目的核心在于它如何通过HTML和CSS实现复杂的交互逻辑。具体来说，这个9x9x9的方块世界允许玩家放置和删除7种不同类型的方块，并且可以旋转视角进行观察。Simon Willison，Django框架的作者，特地为此项目撰写了一篇博客，深入分析了其技术原理。
Benjamin利用了35001个标签和5840个单选按钮来构建状态存储引擎。每个方块的六个面都有一个标签，用户点击任意一面就会触发一个隐藏的开关，通过的for属性链接到相邻方块的状态。通过CSS的has()选择器，用户可以轻松切换方块的材质，这一设计不仅巧妙，还让人叹为观止。
在生成上万行HTML标签时，Benjamin采用了Pug语言来简化代码编写，这让他能轻松批量生成标签。通过嵌套结构和循环，他将复杂的HTML结构变得井然有序，使得整个项目在代码上更具可读性。
另一个亮点是项目的3D视图控制和旋转设计。Benjamin通过CSS动画来实现这些功能，用户按住对应按钮时，动画便会从暂停状态变为运行状态，控制3D视图的旋转。这个方法不仅有效地替代了Java的动画控制，还展现了CSS的强大潜力。
随着Simon Willison的分享，这个项目在HackerNews上引发了热烈讨论，网友们纷纷称赞这是CSS的“黑魔法”，并表示重新爱上了网页开发。Benjamin也在评论区回应称，项目的访问量让他的Firebase托管服务达到了流量上限，转而使用Cloudflare进行托管。
虽然这个项目可能没有实际的生产用途，但它充分展示了HTML和CSS的无限可能性，提醒我们有时只需一些巧思，就能创造出令人惊叹的效果。对于前端开发者而言，这是一个重要的启示，鼓励大家探索技术的边界，挖掘工具的潜力。返回搜狐，查看更多