图片扫描仪第一弹，我实现了一个办公位简笔画

来一波对比

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

办公位简笔画

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

桌子

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

首先，想要实现立体效果，正面要被压缩，所以我用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;
} 
1
2
3
4
5
6

显示器 🖥

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

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

电脑 💻

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

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

.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;
} 
1
2
3
4

键盘 ⌨️

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

1
2

杯子🍵

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

1
2

书 📚

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

书这里需要介绍一个知识点，就是文字纵向展示。先看代码，再来讲讲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;
} 
1
2

writing-mode

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

看下它的基础属性值

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