CSS Only：无限办公
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
这是由 Axero 赞助的前端挑战赛：办公版，CSS 艺术：办公文化的参赛作品。
灵感
这张图的灵感来自Shutterstock上的一幅插画。我开始编写代码来实现它，但随着开发的进行，我发现它缺少一些东西。
我曾在很多办公室工作过，有些很糟糕，有些则非常棒。但最终真正重要的不是空间本身，而是与我共事的人。一个空荡荡的办公室仅仅是一个摆放着物品的空荡空间。这幅画需要一些“人情味”。因此，我使用了伪元素来添加人物……稍后再详细说说。
演示
我建议您前往CodePen 详情页面，因为它可以轻松地垂直调整预览窗口的大小，这样您就可以看到更多的绘图内容。
但这里有一个实时演示和源代码：
上面的演示中，人物是“硬编码”到 ` <div> `元素:root中的，而不是 `<div>` 和 `<div>` 元素中的。这是因为我发现，使用伪元素绘制这类图形会严重影响性能。你可以在另一个示例代码中查看使用伪元素的动画版本（请自行承担取消底部动画注释的风险 :P）。::before::after
旅行
这并非我第一次尝试只用 CSS 而不使用 HTML 元素来绘制“无限”的 CSS 图形（我已经断断续续地编写这个城市景观代码一段时间了），但这是我完成得最快的一次。
我的想法是创作一幅无限延伸的画作。为了实现这一点，我使用了不同尺寸的背景，这样当它们重复出现时，彼此之间的图案就不会那么明显（尽管有时还是能看出来）。
关键在于：这幅图完全由 CSS 构成，没有 HTML 或 JS。有些人可能会说“但是你需要 HTML 来引入 CSS”，通常情况下确实如此（即使在这个示例中，CodePen 也添加了一个 ` <body><head>` 标签），但有一些（不太正规的）方法可以单独执行 CSS（我曾经用 Apache 和 Firefox 做过类似的事情）。总之，如果你查看 CodePen 上的代码，你会发现只有 CSS。
这是我在 CodePen 上编写绘图代码的延时视频：
正如我上面提到的，空荡荡的办公室只是空的，真正决定一个办公室成败的是在那里工作的人。所以我需要添加一个人。我想到的是一个友善版的自己，向观众挥手。
我用伪元素画了人物，因为这样可以添加一些动画，但最终我没这么做（虽然加了，但性能下降了，所以我选择移除动画）。如果我知道会这样，也许我会画两个人。如果你想看动画，代码里有注释（在代码末尾附近）。
执照
本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。这意味着您可以自由复制、重复使用和修改此图（非商业用途），只要您对作者给予适当的署名即可。
文章来源：https://dev.to/alvaromontoro/css-only-infinite-office-28oe