【用css画出你的样子】夜深人静的时候，这就是你晚上的状态吧！

前言

专家说过，晚上要早点睡，不要熬夜玩手机，容易头秃的。

为了告诫各位JYM，我决定画一张大家晚上的样子，可能是大家未来的样子。下面的内容谨慎观看，容易引起部分人群的不适。

先来一张半夜的床榻

🤭 床，方形也。

<div id="bed"></div>

#bed {
  width: 32vmin;
  height: 60vmin;
  left: 24vmin;
  top: 5vmin;
  background: #4E057E;
}

• vmin表示当前窗口中宽度和高度的较小值
• 例如：宽高是1100px * 700px，那么 1vmin 较小值就是 7px

再给自己盖一层被子

🤭 被子，亦方形也。

<div id="quilt"></div>

#quilt {
  width: 40vmin;
  height: 40vmin;
  left: 20vmin;
  top: 30vmin;
  background: #601E8B;
}

最后再弄个枕头

🤭 枕头，还是方形也。

<div id="pillow"></div>

#pillow {
  width: 20vmin;
  height: 10vmin;
  left: 30vmin;
  top: 15vmin;
  background: #601E8B;
}

画出你秃头的样子

🤭 秃者，无毛也。

<div id="body"></div>
<div id="neck"></div>
<div id="head"></div>
<div id="hair"></div>

• 头 、 身 、 脖

#body {
  width: 12vmin;
  height: 10vmin;
  left: 34vmin;
  top: 28vmin;
  background: #FFE0BD;
}
#neck {
  width: 3vmin;
  height: 5vmin;
  left: 38.5vmin;
  top: 24vmin;
  background: #FFE0BD;
}
#head {
  width: 10vmin;
  height: 11vmin;
  left: 35vmin;
  top: 16vmin;
  border-radius: 5vmin;
  background: #FFE0BD;
}
#hair{
    /* 头都秃了，还写啥样式呀 */
}

呆滞的表情

🤨 夜深了，眼神眨巴眨巴的

<div id="eye-left"></div>
<div id="eye-right"></div>
<div id="mouth"></div>

#eye-left {
  width: 1vmin;
  height: 1vmin;
  left: 40vmin;
  top: 22vmin;
  transform: scale(1.2, 2);
  background: #000;
  border-radius: 100%;
}
#eye-right {
  width: 1vmin;
  height: 1vmin;
  left: 42.5vmin;
  top: 22vmin;
  transform: scale(1.2, 2);
  background: #000;
  border-radius: 100%;
}
#mouth {
  width: 2.5vmin;
  height: 1vmin;
  border-radius: 100%;
  left: 40.5vmin;
  top: 24.5vmin;
}

• 为了防止眼神过于呆滞，还是加点动画效果，让眼睛眨起来

在 eye-left 和 eye-right 的样式中都添加一个动画效果

animation: eye 2500ms ease-in-out 0s infinite normal;

@keyframes eye {
  0%,86%,100% {
    transform: scale(1.2, 2);
  }
  93% {
    transform: scale(1.2, 0);
  }
}

最后就是一部手机熬到天亮了

🤨 一手玩机，一手枕着头，这才是熬夜的标配姿势

<div id="arm-left"></div>
<div id="arm-right"></div>
<div id="phone"></div>
<div id="hand"></div>

• 左手、右手、手机

#arm-left {
  width: 14vmin;
  height: 12vmin;
  left: 40vmin;
  top: 18vmin;
  border-radius: 0 6vmin 6vmin 0;
  background: none;
  border-top: 2vmin solid #FFE0BD;
  border-right: 2vmin solid #FFE0BD;
  border-bottom: 2vmin solid #FFE0BD;
}
#arm-right {
  width: 12vmin;
  height: 14vmin;
  left: 34vmin;
  top: 29vmin;
  border-radius: 0 0 6vmin 6vmin;
  background: none;
  border-left: 2vmin solid #FFE0BD;
  border-right: 2vmin solid #FFE0BD;
  border-bottom: 2vmin solid #FFE0BD;
}
#phone {
  width: 5vmin;
  height: 8vmin;
  left: 42vmin;
  top: 26vmin;
  border-radius: .5vmin;
}
#hand {
  width: 3vmin;
  height: 3vmin;
  left: 43.5vmin;
  top: 32vmin;
  border-radius: 100%;
  background: #FFE0BD;
}

总结

熬夜伤身，熬夜秃头，手机玩多了也不好，还是听听专家的意见，早睡早起身体好。