来一波对比

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

办公位简笔画

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

桌子

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

• 首先，想要实现立体效果，正面要被压缩，所以我用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

writing-mode属性可以设置文本水平或垂直排布以及在块级元素中文本的行进方向。

看下它的基础属性值

属性值	含义
horizontal-tb	对于左对齐（ltr）文本，内容从左到右水平流动。对于右对齐（rtl）文本，内容从右到左水平流动。下一水平行位于上一行下方。
vertical-rl	对于左对齐（ltr）文本，内容从上到下垂直流动，下一垂直行位于上一行左侧。对于右对齐（rtl）文本，内容从下到上垂直流动，下一垂直行位于上一行右侧。
vertical-lr	对于左对齐（ltr）文本，内容从上到下垂直流动，下一垂直行位于上一行右侧。对于右对齐（rtl）文本，内容从下到上垂直流动，下一垂直行位于上一行左侧。

桌前挡板

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

用黑色直线示意便签纸上有内容。（我有点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点的时候，显示器自动关闭，光线变暗。

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

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