几年前做前端，HTML、CSS 和 JavaScript 被誉为「前端三剑客」，是很多入坑的开发者逃不开避不掉的技术。其中，HTML 负责搭建架子、CSS 负责视觉美化、JavaScript 则主攻网页交互，三者缺一不可。
不过最近，一位名叫 Benjamin Aster 的开发者却玩了波「反套路」—— 他竟然用纯 HTML 和 CSS 搞出了一个《我的世界》（Minecraft）克隆版！
没听错，整个项目里一行 JavaScript 都没有。所有的交互逻辑、动画效果，全靠这两位“老将”撑场，但是效果属实不错。
正如下图所示，这款游戏中，3D 方块可以自由添加和删除，视角还能旋转浏览，完全不像是没用 JS 的成果，堪称魔法。
话不多说，想要体验的小伙伴不妨试玩一把：https://benjaminaster.com/css-minecraft/
目前，这个项目也已经在 GitHub 上开源：https://github.com/BenjaminAster/CSS-Minecraft
480 行 CSS + 46022 行 HTML，堆出了一个 3D 世界！
那 Benjamin Aster 是怎么做到的呢？
这个问题其实也引起了不少开发者的兴趣。英国程序员、Django 框架的作者 Simon Willison 就在看到这个项目后，专门写了一篇博客，深入解析了这个 0 行 JavaScript、全靠 HTML 和 CSS 撑起来的《我的世界》克隆版背后的技术原理。
简单来看，这是一个 9x9x9 的世界，可以在其中放置或移除 7 种不同类型的方块，也可以以 3D 视角旋转这个世界，从不同角度进行观察。
让人意外的是，整个项目仅用 480 行 CSS 实现：
还有 46,022 行 HTML 代码，只有 3.07MB！
核心技术原理
光看这代码量就像用牙签拼城堡，这个项目之所以能运作起来，Simon Willison 解释称，关键技巧是将 <label> 标签与 has() 选择器组合使用才得以实现。
对此，整个页面中有 35001 个 <label> 标签和 5840 个 <input type="radio"> 单选按钮组成了状态存储引擎。
每个方块的六个面都相当于一个标签，点击任意一面，就像触发了一个隐藏的开关，通过<label>的 for 属性精准「链接」到相邻方块的状态。
has() 选择器就像个「大管家」，比如当你选中「石头」材质的单选按钮时，它会立刻让其他材质的方块「隐身」（display: none），只留下石头方块在界面上显示。具体实现代码如下：.controls:has(> .block-chooser > .stone > input[type=radio]:checked) ~ main .cubes-container > .cube:not(.stone) {display: none;}
值得一提的是，因为这个项目要生成上万行 HTML 标签，比如几万个 <label> 和 <input>，用纯手写 HTML 会非常麻烦和冗长。所以在项目里面，作者 Benjamin Aster 使用一种叫做 Pug 语言编写的 HTML 模板文件，可以通过嵌套结构和循环轻松地批量生成这些标签，再通过构建工具（比如 pug-cli）编译成普通 HTML 文件。
下面是这个 Pug 模板的简化版本（完整代码详见：https://github.com/BenjaminAster/CSS-Minecraft/blob/main/index.pug），可以帮助大家理解 HTML 的结构：
//- pug index.pug -w- const blocks = ["air", "stone", "grass", "dirt", "log", "wood", "leaves", "glass"];- const layers = 9;- const rows = 9;- const columns = 9;<html lang="en" style="--layers: #{layers}; --rows: #{rows}; --columns: #{columns}"><!-- ... --><div class="blocks">for _, layer in Array(layers)for _, row in Array(rows)for _, column in Array(columns)<div class="cubes-container" style="--layer: #{layer}; --row: #{row}; --column: #{column}">- const selectedBlock = layer === layers - 1 ? "grass" : "air";- const name = `cube-layer-${layer}-row-${row}-column-${column}`;<div class="cube #{blocks[0]}">- const id = `${name}-${blocks[0]}`;<input type="radio" name="#{name}" id="#{id}" !{selectedBlock === blocks[0] ? "checked" : ""} /><label for="#{id}" class="front"></label><label for="#{id}" class="back"></label><label for="#{id}" class="left"></label><label for="#{id}" class="right"></label><label for="#{id}" class="top"></label><label for="#{id}" class="bottom"></label></div>each block, index in blocks.slice(1)- const id = `${name}-${block}`;- const checked = index === 0;<div class="cube #{block}"><input type="radio" name="#{name}" id="#{id}" !{selectedBlock === block ? "checked" : ""} /><label for="cube-layer-#{layer}-row-#{row + 1}-column-#{column}-#{block}" class="front"></label><label for="cube-layer-#{layer}-row-#{row - 1}-column-#{column}-#{block}" class="back"></label><label for="cube-layer-#{layer}-row-#{row}-column-#{column + 1}-#{block}" class="left"></label><label for="cube-layer-#{layer}-row-#{row}-column-#{column - 1}-#{block}" class="right"></label><label for="cube-layer-#{layer - 1}-row-#{row}-column-#{column}-#{block}" class="top"></label><label for="cube-layer-#{layer + 1}-row-#{row}-column-#{column}-#{block}" class="bottom"></label></div>//- /each</div>//- /for//- /for//- /for</div><!-- ... -->
因此，对于每一个 9x9x9 = 729 个立方体，都会生成一组共享相同 name 的 8 个 radio 按钮，例如 cube-layer-0-row-0-column-3 ——意味着这个方块可以有 8 种状态（其中 “air” 表示空气，也就是空白，其余则代表不同的材质类型）。每个方块有 6 个 label，分别对应它的六个面，这些 label 的 for="" 属性会指向相邻位置、当前所选材质类型的下一个方块。
CSS 动画玩出 3D 世界旋转
.controls:has(.up:active) ~ main .down {animation-play-state: running;}.controls:has(.down:active) ~ main .up {animation-play-state: running;}.controls:has(.clockwise:active) ~ main .clockwise {animation-play-state: running;}.controls:has(.counterclockwise:active) ~ main .counterclockwise {animation-play-state: running;}
这些规则意味着，当你按住对应的按钮（例如 .clockwise），与之关联的动画会从暂停状态变为运行状态。
接着，Benjamin 又为每种操作都定义了对应的动画：
.content .clockwise {animation: var(--animation-duration) linear 1ms paused rotate-clockwise;}@keyframes rotate-clockwise {from {rotate: y 0turn;}to {rotate: y calc(-1 * var(--max-rotation));}}.content .counterclockwise {animation: var(--animation-duration) linear 1ms paused rotate-counterclockwise;}@keyframes rotate-counterclockwise {from {rotate: y 0turn;}to {rotate: y calc(var(--max-rotation));}}
当你按住某个按钮时，动画从 paused 切换为 running，一旦松开按钮就会暂停。动画执行期间，会改变目标元素上的各种 3D 变换属性，实现空间旋转。
整个设计巧妙得令人惊叹，一旦你理解了它的核心技巧，会发现它的实现其实相当优雅而且可读性强。
随着 Simon Willison 将这一项目分享出来，也在 Hacker News 引发热烈讨论，网友们纷纷感叹这简直是「CSS 黑魔法」：
我完全没想到 :has() 还能这么用，直接看傻了。
这种项目虽然没啥生产用途，但绝对让我重新爱上写网页。
这是对 CSS 的精彩‘滥用’，我太喜欢了。
没多久，项目作者 benjaminaster 也现身 Hacker News 评论区，惊呼：“你们的访问量实在太猛了，把我的网站挤爆了……我之前用的是 Firebase 的静态托管服务，因为它完全免费而且配置非常简单，但现在已经达到了每月 10 GB 的流量上限。我目前已经切换到 Cloudflare，不过 DNS 记录的更新还需要一点时间。”
在此期间，可使用 GitHub Pages 链接访问项目：https://benjaminaster.github.io/CSS-Minecraft/
Benjamin 还补充说，这个项目其实是他三年前的实验作品，最初只是想探索纯 CSS 的极限表现力，并测试当时刚被浏览器支持的 :has() 选择器。没想到多年之后，因为一次分享突然爆红网络。
为了获得最佳体验，他建议使用桌面端浏览器访问，推荐基于 Chromium 的浏览器或 Firefox。
项目源码地址：https://github.com/BenjaminAster/CSS-Minecraft
其中 index.pug 和 main.scss 是主要源码，其余为编译后的输出内容。
演示视频： https://www.youtube.com/watch?v=OH8-Y9frP5k
整体来看，只用了 480 行 CSS 和 4 万多行 HTML，就拼出了一个能放方块、盖房子、旋转视角的 3D 世界。它或许不是最实用的作品，但它证明了：挖掘 HTML 和 CSS 的潜力，不一定非得依赖复杂的技术，有时候，只要足够巧思，也能实现出乎意料的精彩。
https://simonwillison.net/2025/May/26/css-minecraft/
https://news.ycombinator.com/item?id=44100148
2025 全球产品经理大会
2025 年 8 月 15–16 日
北京·威斯汀酒店
2025 全球产品经理大会将汇聚互联网大厂、AI 创业公司、ToB/ToC 实战一线的产品人，围绕产品设计、用户体验、增长运营、智能落地等核心议题，展开 12 大专题分享，洞察趋势、拆解路径、对话未来。