前因后果

之前分享过我司食堂的美食，虽然档口不多，但是美食种类会周期性的更迭。

先来报个菜名

早餐种类丰富:

来张美食九宫格

换回正题

每日三餐，是我非常期待的，为了吃到食堂的早饭，我会定好闹铃早起。

最近为需求挠头，今天晚上吃了块食堂的南瓜，一下子甜到心里了，瞬间所有的烦恼忧愁都消散了。

今天在群里和群友聊天，看到最近喜欢的表情，我来了灵感，准备用CSS画朵花送给我司食堂的大厨们。

上技能

表情拆分

我们看这个表情里面是所有元素，拆分再聚合，就能实现它了。

• 表情的脸是一个圆。
• 表情的眼睛是两个眼，每个眼睛里的眼仁是一个圆，每个眼睛里的光亮是两个圆。
• 表情的嘴巴，遮住上半部分是半个椭圆，上半部分还是个猫儿唇（微笑唇），下面自说怎么实现。
• 表情的手，是两个圆。
• 表情拿的花是六个圆，五个花瓣外加一个花蕊。
• 送花的动画效果，手和花上下移动，这个时候注意将花设计为一个整体，做动画效果的时候比较省力。

这样一拆分，就能了解怎么实现它了。最终将实现的所有部分组合起来就是上面预览的效果啦。

一个圆

第一个圆指的是表情的圆脑袋，圆脑袋还带一圈边框。

.face,
.hand {
  border-radius: 100%;
  border: 2px solid #d9900a;
  background: #fcf08b;
  position: absolute;
}
.face {
  width: 80px;
  height: 80px;
  top: 0;
  left: 0;
}

两个圆

两个圆是表情的两个眼睛。

白色的大圆是眼仁。

为了表现眼睛亮晶晶的状态，又给眼睛加了两个光点，光点不必单加元素，使用::after和::before伪元素即可。

.eye {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: #5a2407;
  box-shadow: -7px 16px 4px -11px #8e4e1b inset;
  position: absolute;
  z-index: 99;
}
.eye1 {
  left: 6px;
  top: 15px;
}
.eye2 {
  left: 37px;
  top: 12px;
}
.eye::after,
.eye::before {
  content: '';
  width: 3px;
  height: 3px;
  background: #fff;
  border-radius: 100%;
  position: absolute;
  opacity: 0.8;
}
.eye::before {
  left: 4px;
  bottom: 4px;
}
.eye::after {
  right: 5px;
  bottom: 2px;
}
.eye-inner {
  width: 7px;
  height: 7px;
  background: #fff;
  border-radius: 100%;
  position: absolute;
  top: 3px;
  left: 7px;
  opacity: 0.8;
}

半个椭圆

这个椭圆是表情的嘴巴，不过只有椭圆呈现出来的效果一般。

想要更好的效果，还得像表情那样加个猫儿唇。

弧线是比较难实现的，还得有点技巧。我一般是用个椭圆设置单边边框，就能实现弧线。别说，效果还挺好。

.mouth {
  width: 20px;
  height: 26px;
  background: #732a04;
  border-radius: 0 0 100% 100%;
  position: absolute;
  top: 35px;
  left: 23px;
  box-shadow: 0px -15px 8px -4px #c42c02 inset;
  transform: rotate(-5deg);
}
.mouth::before,
.mouth::after {
  content: '';
  width: 18px;
  height: 10px;
  background: #fcf08b;
  border-radius: 200%;
  position: absolute;
  border-bottom: 3px solid #732a04;
}
.mouth::before {
  left: -7px;
  top: -7px;
  transform: rotate(-20deg);
}
.mouth::after {
  right: -6px;
  top: -7px;
  transform: rotate(16deg);
}

再来两个圆

这两个圆是两个小手。

• 当遇到相似元素样式的时候，可以进行样式合并，选择器是可以用逗号间隔的，手和脸的样式重合率挺高的，所以我进行了合并。
• 手部的动画效果，是配合花朵一起的，用动画的形式，表示送花的积极寓意。注意要上下移动，效果会更好一些。

.hand {
  width: 24px;
  height: 24px;
}

.hand1 {
  left: 47px;
  top: 59px;
  animation: hand1 0.5s linear infinite;
}
.hand2 {
  left: 70px;
  top: 50px;
  animation: hand2 0.5s linear infinite;
}
@keyframes hand1 {
  0% {
    top: 59px;
  }
  50% {
    top: 64px;
  }
  100% {
    top: 59px;
  }
}
@keyframes hand2 {
  0% {
    top: 50px;
  }
  50% {
    top: 55px;
  }
  100% {
    top: 50px;
  }
}

六个圆

最后这一圈就是花了。

• 五个椭圆是花瓣，整体的样式相似所以五个花瓣都有共同的class类，然后再给每个花瓣设置单独的样式，进行定位和旋转。
• 一个圆是花蕊，花蕊的背景是白色，和花瓣有区分，比较有辨识度。
• 这里的动画效果，用animation实现，主要设置了一个上下移动的距离，且循环间隔的时间设置的0.5s，这样视觉上会好一点。

.flower {
  position: absolute;
  width: 50px;
  height: 50px;
  left: 36px;
  top: 21px;
  transform: rotate(-14deg) scale(0.9);
  animation: flower 0.5s linear infinite;
}
@keyframes flower {
  0% {
    top: 21px;
  }
  50% {
    top: 26px;
  }
  100% {
    top: 21px;
  }
}
.flower-inner {
  width: 21px;
  height: 21px;
  border: 3px solid #f1558e;
  background: #fff;
  position: absolute;
  border-radius: 100%;
  left: 20px;
  top: 20px;
  z-index: 99;
}
.petal {
  width: 20px;
  height: 24px;
  border: 3px solid #f1558e;
  background: #fcc3d7;
  position: absolute;
  border-radius: 100%;
  left: 20px;
  top: 20px;
  z-index: 29;
}

未完待续

美食吃到了，花也画出来了，好事当然要成双。

正如前面文章说过的，CSS真能玩出花。

彩蛋时刻

一组早餐六宫格，跟大家分享我的早餐的快乐时光。