「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」
孤单的作者因为没有人约出去玩，下午上班的时候无意看到一个可爱的机器人，突然萌发奇想，能不能用css把它写出来，并动起来呢？于是晚上在家里开写了，本来想万圣节当天发 T_T 结果写完后发现到凌晨了，太惨了
CSS大部分通过 box-shadow 来进行实现。
话不多说，让我们进入正题。我们要实现的机器人（静态图）如下：
首先简单了解一下box-shadow
- box-shadow 可以进行多层次嵌套，也就是你可以写很多个阴影
- box-shadow：左右移动（x轴，可为负数）、上下移动（y轴，可为负数）、模糊半径、扩散半径（可以为负）、色值
这边只是进行一个简单介绍，想了解更详细的请前往直通车 chokcoco 大佬写的 # 你所不知道的 CSS 阴影技巧与细节
结构
机器人 Html 结构挺简单的 主要就是分为3个DIV层级
我们将机器人拆分成三个区域，分别为天线、头部、以及身体，然后进行组装
<div class="jiqiren">
<!-- 天线 -->
<div class="tianxian"></div>
<!-- 头部 -->
<div class="tou"></div>
<!-- 身体 -->
<div class="shenti"></div>
</div>
初始化
先设置默认的图层大小，并且属性为居中
body {
background: #666;
}
.jiqiren {
display: flex;
position: relative;
margin-top: 25vh;
height: 100vh;
flex-direction: column;
align-items: center;
}
天线
天线部分算是最简单的，想写个长方形，再通过伪类的方式叠加个圆在上面
.tianxian {
position: relative;
width: 25px;
height: 80px;
background-color: #c8c8c8;
}
.tianxian::before {
content: '';
position: absolute;
left: -13px;
top: -20px;
width: 50px;
height: 50px;
background: #f1f1f1;
border-radius: 50%;
}
头部
头部可以拆分成3个区域实现，分别为头部主干、眼睛 以及 耳朵
头部主干
- 写出内部矩形
- 通过border写出外部边框
.tou {
position: relative;
z-index: 3;
width: 500px;
height: 200px;
border: 50px solid #fff;
background-color: #9ed1ff;
}
眼睛
- 通过伪类写出一个圆眼睛，定位到合适位置
- 阴影：X轴偏移
.tou::after {
content: '';
position: absolute;
margin: auto;
left: 60px;
top: 0;
bottom: 0;
width: 60px;
height: 60px;
border-radius: 50%;
background: #6b6b6b;
box-shadow: 320px 0 0 0 #6b6b6b;
}
耳朵
- 先写出最小的耳朵，再通过阴影：XY轴偏移+扩散方式写出大耳朵
- 再复制上述阴影代码，修改X轴偏差，形成第二个耳朵
.tou::before {
content: '';
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: -80px;
width: 30px;
height: 80px;
box-shadow: -20px 0 0 -5px #efefef,
0 40px 0 0 #d0d0d0,
0 -40px 0 0 #d0d0d0,
655px 0 0 -5px #efefef,
630px 40px 0 0 #d0d0d0,
630px -40px 0 0 #d0d0d0;
background-color: #d0d0d0;
}
身体区域
同理，躯干也拆解成三部分，主躯干、左右手 和 脖子
主驱干
知道 box-shadow基本属性，躯干的思路大致就有了，其实就是设置扩散 和 xy轴的方向，先写出最中间的矩形，再向外进行扩散
.shenti {
margin-top: 180px;
position: relative;
width: 380px;
height: 150px;
background: #e5e5e5;
box-shadow: -20px -20px 0 20px #9ed1ff,
20px -20px 0 20px #9ed1ff,
60px -50px 0 50px #fff,
-60px -50px 0 50px #fff;
}
左右手
左右手的思路为，先通过 before 伪类写出左手，相对定位后，加上一层阴影通过x轴偏移来实现右手
.shenti::before {
content: '';
position: absolute;
left: -140px;
bottom: 0;
width: 30px;
height: 160px;
box-shadow: 630px 0 0 #d0d0d0;
background-color: #d0d0d0;
}
脖子
同理，脖子通过 after 先写出小的区域，再通过阴影扩张+偏移来实现衣领部分
.shenti::after {
content: '';
position: absolute;
z-index: -1;
margin: auto;
left: 0;
right: 0;
top: -182px;
width: 80px;
height: 40px;
box-shadow: 0 120px 0 80px #e5e5e5;
background-color: #d0d0d0;
}
这里注意一下，脖子区域的top 稍微给多2px，让其被头部遮挡住一点，这样后面动画动起来就不会很怪异
最后将三者组合起来就是一个整体
动画
最后，我还想让他动起来，看起来萌萌的，只需要通过 animation 给头部和天线部分增加 旋转2px即可
.tianxian,
.tou {
animation: huodong 1s ease-in-out;
animation-direction: alternate;
-webkit-animation-direction: alternate;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
@keyframes huodong {
0% {
transform: rotate(-2deg);
}
100% {
transform: rotate(2deg);
}
}
最后，将整体css组合一下，就得到了我们萌萌的机器人了
