likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 11

前言

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

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

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

先来一张半夜的床榻

🤭 床,方形也。

<div id="bed"></div>
#bed {
  width: 32vmin;
  height: 60vmin;
  left: 24vmin;
  top: 5vmin;
  background: #4E057E;
}
  • vmin表示当前窗口中宽度和高度的较小值
  • 例如:宽高是1100px * 700px,那么 1vmin 较小值就是 7px

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

再给自己盖一层被子

🤭 被子,亦方形也。

<div id="quilt"></div>
#quilt {
  width: 40vmin;
  height: 40vmin;
  left: 20vmin;
  top: 30vmin;
  background: #601E8B;
}

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

最后再弄个枕头

🤭 枕头,还是方形也。

<div id="pillow"></div>
#pillow {
  width: 20vmin;
  height: 10vmin;
  left: 30vmin;
  top: 15vmin;
  background: #601E8B;
}

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

画出你秃头的样子

🤭 秃者,无毛也。

<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{
    /* 头都秃了,还写啥样式呀 */
}

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

呆滞的表情

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

<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-lefteye-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);
  }
}

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

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

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

<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;
}

总结

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