来一波对比

其实我工位还有点手办，一个植物，实在不会画，于是画了个基础版的。

在线预览

办公位简笔画

虽然，这个工位上没有一个动画，但是图形和实物神似，所以可以用另一个动总结这个简笔画，那就是生动。

桌子

办公室，桌子必不可少，因为我是照着壁纸的格式画的，所以桌子的腿不全。着重是桌面。

• 首先，想要实现立体效果，正面要被压缩，所以我用transform转换设置了一个沿X轴旋转的值；
• 桌子沿用伪元素实现的；
• 一只桌子腿也是用伪元素实现的。

.table {
  width: 414px;
  min-width: 375px;
  height: 200px;
  background: #fdfff4;
  position: absolute;
  transform: rotateX(-45deg);
  top: 200px;
  z-index: 9;
}
.table::before {
  content: '';
  width: 100%;
  height: 40px;
  background: #fdfff4;
  border-top: 1px solid #020000;
  border-bottom: 1px solid #020000;
  position: absolute;
  top: 180px;
  z-index: 9;
}
.table::after {
  content: '';
  width: 32px;
  height: 280px;
  background: #fdfff4;
  border-right: 1px solid #020000;
  border-bottom: 1px solid #020000;
  position: absolute;
  top: 180px;
}

显示器 🖥

显示器就比较灵性了，怎么表现它开着呢，当然是展示打开显示器时的电脑桌面啦，文件夹和窗口。

• 显示器包括显示屏幕、连接轴、基座（其实还有电源线，但是我不太会话拐弯的图形）。
• 文件夹是一排小矩形。
• 窗口是一个矩形，带了关闭按钮。

<div class='monitor'>
  <div class='file file1'></div>
  <div class='file file2'></div>
  <div class='file file3'></div>
  <div class='monitor-note'></div>
</div>
<div class="monitor-base"></div>

电脑 💻

电脑的键盘太复杂，所以我实现的电脑的图形，是水平看它时的样子。有键盘的厚度，没有它的具体内容。

几行代码，加一个伪元素就可以实现，简单多了。

.laptop {
  width: 70px;
  height: 45px;
  z-index: 19;
  background: #000;
  border-radius: 5px 5px 0 0;
  position: absolute;
  top: 210px;
  left: 20px;
  border: 5px solid #89a68d;
}
.laptop::before {
  content: '';
  width: 100px;
  height: 7px;
  background: #1a1f2b;
  border-radius: 0 0 5px 5px;
  position: absolute;
  left: -15px;
  top: 49px;
}

键盘 ⌨️

这个键盘是蓝牙键盘，因为是简笔画，所以只画了几个线条，示意了一下。

<div class='keyboard'>
  <div class='keyboard-l keyboard-l1 keyboard-l11'></div>
  <div class='keyboard-l keyboard-l1 keyboard-l12'></div>
  <div class='keyboard-l keyboard-l1 keyboard-l13'></div>
  <div class='keyboard-l keyboard-l2 keyboard-l21'></div>
  <div class='keyboard-l keyboard-l2 keyboard-l22'></div>
  <div class='keyboard-l keyboard-l2 keyboard-l23'></div>
  <div class='keyboard-l keyboard-l2 keyboard-l24'></div>
  <div class='keyboard-l keyboard-l2 keyboard-l25'></div>
</div>

杯子🍵

这个杯子是不是很眼熟，这是我最喜欢的掘金周边之一，马克杯。

<div class='cup'>
  <div class='cup-inner'></div>
  <div class='cup-c cup-c1'></div>
  <div class='cup-c cup-c2'></div>
  <div class='cup-c cup-c3'></div>
</div>

书 📚

我办公位的桌子上会有基本专业书，闲暇的时候会翻看一下。

书这里需要介绍一个知识点，就是文字纵向展示。先看代码，再来讲讲writing-mode的知识点。

.book span {
  width: 18px;
  height: 70px;
  font-size: 12px;
  font-weight: 600;
  background: #87a890;
  display: block;
  writing-mode: vertical-rl;
  color: #fff;
  text-align: center;
  position: absolute;
  top: 3px;
  left: 3px;
}

writing-mode

看下它的基础属性值

桌前挡板

挡板上有便利贴，帮助记录一些重要的事情。养成好习惯，帮助提升工作效率。

用黑色直线示意便签纸上有内容。（我有点get到简笔画的精髓了）

<div class='baffle'>
  <div class='note note1'>
    <div class='note-l note-l1'></div>
    <div class='note-l note-l2'></div>
  </div>
  <div class='note note2'>
    <div class='note-l note-l1'></div>
    <div class='note-l note-l2'></div>
    <div class='note-l note-l3'></div>
  </div>
</div>

椅子 🪑

我办公位的椅子是图中这种升降椅，头部有个小枕头。底部的连接轴可以调整高度。

两边的把手也是用伪元素实现的。

<div class='chair'>
  <div class='chair-top'></div>
  <div class='chair-center'></div>
  <div class='chair-bottom'></div>
</div>

未完待续

文章写完我发现，其实可以加动画的，比如显示器屏幕发出亮光，时钟可以走针，还可加上光线。对了，还可以设计成这样：

• 早上9点的时候，显示器自动打开，光线变亮。
• 下午6点的时候，显示器自动关闭，光线变暗。

不过最近比较忙，没时间完善了，等有空了再加这些功能吧。

还有，要不要画一波会议室呢，毕竟会议室的电视📺那么方正，桌子那么长。但是我不太会画植物，等我练习一下怎么画植物，学会大招再战。